これまでのDOM操作では、既存のノードにアクセスしたり変更を行う方法を見てきました。
動的なページを作成するには、既存のコンテンツを変更するだけでなく、時には元々無かったコンテンツを新しく作成することも必要です。
そこで今回は、新しいノードを作成する方法を解説していきます。
ノードを作成するメソッド
動的なページを作成している際、その場で新しい要素を作成したい場面があるかもしれません。
そのような場合、新しくノードを作成するためのcreate系メソッドが使用できます。
どのようなノードを作成したいか、種類によって使用できるメソッドが異なります。
以下が各ノードに対応するメソッドです。
createElement()：要素ノードの作成createTextNode()：テキストノードの作成createAttribute()：属性ノードの作成createComment()：コメントノードの作成
主にcreateElementメソッドが使用されますが、ノードの作成方法として一緒にインプットしておくと良いでしょう。
それでは一つずつ見ていきます。
要素ノードの作成
createElementメソッドを使うと、新しい要素ノードを作成することができます。
document.createElement(tag);
引数に指定されたタグの新しい要素ノードが生成されます。戻り値はElementオブジェクトです。
例えば、divタグの要素ノードを新しく作成したい場合、このように書くことができます。
let element = document.createElement('div');
変数elementに対して、ノードの種類や名前、値を取得してみます。
その際、nodeType・nodeName・nodeValueプロパティを使うとかんたんに確認することができます。
console.log(element.nodeType); // 1
console.log(element.nodeName); // "DIV"
console.log(element.nodeValue); // null
ノードの種類は1です。これは要素ノードに該当します。
ノードの名前は”DIV”で、名前の通りdivタグであることを表します。
また、ノードの値はnullとなります。要素ノード自体には値がないためです。
これらの結果からdivタグが作成されたことが分かります。
テキストノードの作成
createTextNodeメソッドを使うと、新しいテキストノードを作成することができます。
document.createTextNode(text);
引数に指定されたテキストの新しいテキストノードが生成されます。戻り値はTextオブジェクトです。
では、テキストノードを作成し検証してみましょう。
let text = document.createTextNode('Hello!');
console.log(text.nodeType); // 3
console.log(text.nodeName); // #text
console.log(text.nodeValue); // "Hello!"
ノードの種類は3、つまりテキスノードです。
ノードの名前は#textです。テキストノードであれば常に#textというラベル付された名前が返されます。
さらにノードの値は引数に指定したテキスト”Hello!”となります。
これで”Hello!”という値を持つテキストノードが作成されたことが確認できました。
属性ノードの作成
createAttributeメソッドは、新しい属性ノードを作成します。
document.createAttribute(attribute);
引数に指定された属性名の新しい属性ノードが生成されます。戻り値はAttrオブジェクトです。
例えば、’header’という値を持つ属性を作成する場合、次のように書くことができます。
let attr = document.createAttribute('id');
attr.value = 'header';
console.log(attr.nodeType); // 2
console.log(attr.nodeName); // "id"
console.log(attr.nodeValue); // "header"
2は属性ノード、”id”が属性名、”header”が属性値です。
これで”header”という値を持つid属性を作成することができました。
コメントノードの作成
createCommentメソッドは、新しいコメントノードを作成します。
document.createComment(comment);
引数に指定されたコメントの新しいコメントノードが生成されます。戻り値はCommentオブジェクトです。
では、これまでと同じように新しくコメントノードを作成してみましょう。
let comment = document.createComment('Fixed the bug');
console.log(comment.nodeType); // 8
console.log(comment.nodeName); // #comment
console.log(comment.nodeValue); // "Fixed the bug"
8がコメントノード、#commentがコメントノードを表す常に一定のノード名です。
さらに、”Fixed the bug”というコメントノードが持つ値が取得できていることが分かります。
まとめ
今回は、新しいノードを作成するメソッドについて解説しました。
// ポイント
* createElement()：要素ノードの作成
* createTextNode()：テキストノードの作成
* createAttribute()：属性ノードの作成
* createComment()：コメントノードの作成
createという名前が付くように、ノードを作成するための機能を持ちます。
そのため、新しく作成したノードはあくまで作成されただけで、実際に活用するにはDOMに追加する必要があります。
詳しくは、次の記事で解説していきますが、まずはノードの作成方法を覚えておくと良いでしょう。
合わせて読みたいDOMシリーズ
第1回：DOMの仕組みと構造
第2回：DOMナビゲーション
第3回：要素ノードの検索 -getElement
第4回：要素ノードの検索 -guerySelector
第5回：ノードの種類・名前・値の取得
第6回：HTMLコンテンツの取得と書き込み -innerHTML
第7回：テキストの取得と書き込み -textContent
第8回：要素の属性の取得・設定・削除
第9回：要素のスタイルの取得・設定・削除
第10回：新しいノードの作成（当記事）
第11回：ノードの追加・置き換え・削除
第12回：要素にテキストを追加する方法
第13回：クラスの変更 -classList
コメント