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