ノードを子ノードの中の指定ノードの前または後ろに追加

ノードを子ノードの中の指定ノードの前または後ろに追加

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【ノードを子ノードの中の指定ノードの前に追加する(before)】

ChildNode オブジェクトの before メソッドはノードを子ノードの中の指定ノードの前に追加します。

書式：childnode.before(node[,node,...])

引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。 DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、まず li タグの新しい要素ノードとテキストノードを作成し、テキストノードを要素ノードに子ノードの最後に追加します。そのあとで id 属性が menu02 の要素ノードの前に先に作成した要素ノードを追加しています。

【ノードを子ノードの中の指定ノードの前に追加する(insertBefore)】

Node オブジェクトの insertBefore メソッドはノードを子ノードの中の指定ノードの前に追加します。

書式：parentnode.insertBefore(node, childnode)

1 番目の引数に追加する Node オブジェクトを指定します。 2 番目の引数に指定した Node オブジェクトの前に追加されます。

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、まず li タグの新しい要素ノードとテキストノードを作成し、テキストノードを要素ノードに子ノードの最後に追加します。そのあとで id 属性が shopinfo の要素ノードを取得し、その子ノードの中の id 属性が menu02 の要素ノードの前に先に作成した要素ノードを追加しています

【ノードを子ノードの中の指定ノードの後に追加する(after)】
ChildNode オブジェクトの after メソッドはノードを子ノードの中の指定ノードの後に追加します。

書式：childnode.after(node[,node,...])

引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。 DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。

サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、まず li タグの新しい要素ノードとテキストノードを作成し、テキストノードを要素ノードに子ノードの最後に追加します。そのあとで id 属性が menu02 の要素ノードの後に先に作成した要素ノードを追加しています。

【既存のノードを追加する】
ノードの追加は新しく作成したノードだけではなく、同じドキュメントに追加されている既存のノードを追加することができます。

その場合、現在の親ノードから対象のノードは削除されて新しく指定した親ノードの子ノードに追加されます。

サンプル

ブラウザをたちあげる

ボタンをクリックする。既存の li タグの要素ノードを別の ul タグの指定した子ノードの後に追加します。この時、もともと追加されていた ul タグの親ノードからは自動的に削除されます。

 

JS--子ノードの追加

ノードを子ノードの中の先頭または最後に追加

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【ノードを子ノードの先頭に追加する】
ParentNode オブジェクトの prepend メソッドはノードを子ノードの先頭に追加します。

書式：parentnode.prepend(node[,node,...])

引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。

DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。

例えば
追加するノードとして div タグの要素ノードを新しく作成し、追加先として id 属性が xxx のノードの子ノードの先頭に追加するには次のように記述します。

let parentnode = document.getElementById('xxx');//追加先ノード
let child = document.createElement('div');//追加するノード

parentnode.prepend(child);子ノードの先頭に追加するサンプル

ブラウザを立ち上げる

クリックする。 li タグの新しい要素ノードを作成したあと prepend メソッドの引数に文字列を指定して実行し、作成した要素ノードにテキストノードを追加します。そのあとで追加先として id 属性が shopinfo の要素ノードを取得し、先に作成した要素ノードを追加先ノードの子ノードの先頭に追加しています。

【ノードを子ノードの最後に追加する(append)】
ParentNode オブジェクトの append メソッドはノードを子ノードの最後に追加します。

書式：parentnode.append(node[,node,...])

引数には追加する Node オブジェクトまたは DOMString オブジェクトを指定します。 DOMString オブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。

サンプル

ブラウザを立ち上げる

ボタンをクリックする

【ノードを子ノードの最後に追加する(appendChild)】
Node オブジェクトの appendChild メソッドはノードを子ノードの最後に追加します。

書式：parentnode.appendChild(node)

引数には追加する Node オブジェクトを指定します。( appendChild メソッドでは同時に一つしか追加できません)。
サンプル

ブラウザを立ち上げる

ボタンをクリック

li タグの新しい要素ノードを作成したあと appendChild メソッドの引数に別途作成したテキストノードを指定して実行し、作成した要素ノードにテキストノードを追加します。そのあとで追加先として id 属性が shopinfo の要素ノードを取得し、先に作成した要素ノードを追加先ノードの子ノードの最後に追加しています。

【既存のノードを追加する】
ノードの追加は新しく作成したノードだけではなく、同じドキュメントに追加されている既存のノードを追加することができます。その場合、現在の親ノードから対象のノードは削除されて新しく指定した親ノードの子ノードに追加されます。

サンプル

ブラウザを立ち上げる

ボタンを押す

既存の li タグの要素ノードを別の ul タグの親ノードに追加します。この時、もともと追加されていた ul タグの親ノードからは自動的に削除されます。

JS--ノードの作成

ノードの作成

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【要素ノードを作成する】
Document オブジェクトの createElement メソッドは新しい要素ノードを作成します。

書式；document.createElement(localname)

1 番目の引数に作成する要素ノードのタグ名を DOMString オブジェクトで指定してください。戻り値は Element オブジェクトが返ります。

例えば
divタグをの要素のノードを新しく作成する

let element = document.createElement('div');

console.log(element.nodeName);
>> DIV
console.log(element.nodeType);
>> 1
console.log(element.nodeValue);
>> null

作成したノードは DOM に追加されるまでは単に作成されただけです。他の種類のノードに着いても同じです。

【テキストノードを作成する】
Document オブジェクトの createTextNode メソッドは新しいテキストノードを作成します。

書式：document.createTextNode(data)

1 番目の引数に作成するテキストノードのテキストを DOMString オブジェクトで指定してください。戻り値は Text オブジェクトが返ります。

例文
 'Hello' というテキストを持つテキストノードを新しく作成する場合

let txtnode = document.createTextNode('Hello');

console.log(txtnode.nodeName);
>> #text
console.log(txtnode.nodeType);
>> 3
console.log(txtnode.nodeValue);
>> Hello

【属性ノードを作成する】
Document オブジェクトの createAttribute メソッドは新しい属性ノードを作成します。

書式：document.createAttribute(localname)

1 番目の引数に作成する属性ノードの属性名を DOMString オブジェクトで指定してください。戻り値は Attr オブジェクトが返ります。

属性名に対する属性値の設定は、戻り値で取得した Attr オブジェクトの value プロパティに値を設定してください。

例えば
属性名 id 、属性値 'main' という属性ノードを新しく作成するには次のように記述します。

作成した属性ノードを要素ノードに追加するには Element オブジェクトの setAttributeNode メソッドを使います

let element = document.createElement('div');→html要素の作成
let attrnode = document.createAttribute('id');→id属性の作成
attrnode.value = 'main';

element.setAttributeNode(attrnode);属性を要素に追加

【コメントノードを作成する】
Document オブジェクトの createComment メソッドは新しいコメントノードを作成します。

書式：document.createComment(data)

1 番目の引数に作成するコメントノードの値を DOMString オブジェクトで指定してください。戻り値は Comment オブジェクトが返ります。

例えば
'Create by Taro' というコメントの値を持つコメントノードを新しく作成するには次のように記述します。

et commentnode = document.createComment('Create by Taro');

console.log(commentnode.nodeName);
> #comment
console.log(commentnode.nodeType);
> 8
console.log(commentnode.nodeValue);
> Create by Taro

【ドキュメントの断片を作成する】
Document オブジェクトの createDocumentFragment メソッドは新しいドキュメントの断片を作成します。

書式：document.createDocumentFragment()

空のドキュメントの断片を作成します。戻り値は DocumentFragment オブジェクトが返ります。

ドキュメントの断片とは、多くのノードをなどを DOM に追加する場合に一時的にノードをまとめるために使用されるものです。
DOM に一つ一つノードを追加していくとその都度ブラウザでの表示位置の調整が発生する可能性がありますが、いったんドキュメントの断片にノードの追加を行ってから、ドキュメントの断片を DOM に追加することで表示位置の調整が一度で済みます。

例えば
ドキュメントの断片を新しく作成するには次のように記述します。

let fragment  = document.createDocumentFragment();

console.log(fragment .nodeName);
> #document-fragment
console.log(fragment .nodeType);
> 11
console.log(fragment .nodeValue);
> null

JS--スタイルの取得と設定

スタイルの取得と設定

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【スタイルの基本】
HTML では要素に対するスタイルの設定を style タグや個々の要素に対する style 属性で設定できます。(外部のスタイルシートに記述しておき読み込むこともできます)。

styleタグのサンプル
このページには p タグが 2 つ含まれまれています。 style タグの中で p タグに対して文字色とフォントサイズに関するスタイルを設定しており、どちらの p タグにも同じようにスタイルが適用されています

ブラウザを立ち上げる

次に個々の p タグに対して style 属性を使ってスタイルを設定する

リロードする

1 つ目の p タグには sytle タグでは設定していない種類のスタイルを設定している。（フォントの太さ）
 2 つ目の p タグでは、 style 属性で、sytle タグで設定している文字色を重ねて設定している。

・style タグと style 属性で異なる種類のスタイルを設定した場合は、それぞれのスタイルが適用されます。
・style タグと style 属性で同じ種類のスタイルをそれぞれ設定した場合、 style 属性の方が優先順位が高いため style 属性で設定した値が適用されます。
【スタイルを設定する(プロパティ)】
要素のスタイルを設定するには、 HTMLElement オブジェクトの style プロパティに値を設定します。

書式：element.style.プロパティ名 = 'value'

この形式でスタイルを設定した場合、要素に対してインラインでの style 属性を設定した場合と同じになります。また既に style 属性を使って設定されている他のプロパティには影響しません。

サンプル

ブラウザを立ち上げる

ボタンを押すと、背景色が変わる

【設定されているスタイルをリセットする】
HTMLElement オブジェクトの style プロパティに対して null を設定すると、そのプロパティのスタイルがリセットされます。

書式；element.style.プロパティ名 = null

ただしこの方法でリセットできるのは style 属性で設定されているプロパティだけです。 style タグで設定されているプロパティについてはリセットできません。
サンプル

ブラウザを立ち上げる

表示されたボタンをクリックすると、 id 属性が address の要素ノードを取得し、要素に style 属性を使って設定されていたスタイルをリセットします。

【スタイルを取得する】
要素に設定されているスタイルを取得するには Windows オブジェクトの getComputedStyle メソッドを使用します。

書式：window.getComputedStyle(element)

引数にスタイルを取得する Element オブジェクトを指定します。戻り値は CSSStyleDeclaration オブジェクトです。このメソッドを使って取得した場合は読み取り専用となります。

CSSStyleDeclaration オブジェクトから特定のプロパティの値を取得するには、 CSSStyleDeclaration オブジェクトの getPropertyValue メソッドを使用します。

書式：style.getPropertyValue(property)

引数には取得したいプロパティの名前を文字列で指定します。プロパティ名は 'font-size' のように CSS で使用する場合と同じ形式で指定します。
サンプル

ブラウザを立ち上げる


表示されたボタンをクリックすると、 id 属性が address の要素ノードを取得し、要素に設定されているスタイルの中で指定したプロパティの値を取得しコンソールに出力します。

色(青)：rgb（0,0,255）
font-weight （フォントの太さ）；700

 

 

JS--要素に設定された属性を削除

要素に設定された属性を削除

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【属性を削除する】

Element オブジェクトの removeAttribute メソッドは、対象の要素に設定されている属性を削除します。

書式：element.removeAttribute(qualifiedName)

引数には削除する属性の属性名を DOMString オブジェクトで指定します。設定されていない属性名を指定した場合は何も行いません。

サンプル

ブライザを立ち上げる

表示されたボタンをクリックすると、 id 属性の値が 'shopinfo' の要素ノードを取得し、最初の子要素に設定されている属性の中で class 属性と target 属性を削除します。そのあとで残っている属性を取得し名前と値をコンソールに出力します。