Nodeとは
NodeはEventTargetを継承したクラスで、DocumentやElementの親となるクラスです。
プロパティ
以下HTMLを例に各プロパティの説明を行います。
<div id="outer">
<div id="inner">
<p id="pa">A</p>
<p id="pb">B</p>
<p id="pc">C</p>
</div>
</div>子要素の取得
document.getElementById('outer').childNodes; //子ノードのリスト => NodeList(3) [text, div#inner, text]
document.getElementById('inner').firstChild; //先頭の子ノード => #text
document.getElementById('inner').lastChild; //末尾の子ノード => #text
兄弟要素の取得
document.getElementById('pa').nextSibling; //次のノード => #text
document.getElementById('pb').previousSibling; //前のノード => #text
親のドキュメント、親要素の取得
document.getElementById('pa').ownerDocument; //ノードを含むドキュメント => #document
document.getElementById('pa').parentNode; //親のノード => <div id="inner">...</div>
document.getElementById('pa').parentElement ; //親の要素 => <div id="inner">...</div>
その他の情報
document.getElementById('pa').nodeName; //ノードの名称 => P
document.getElementById('inner').textContent;//テキスト文字列 => A B C
document.getElementById('pa').nodeType; //ノードの種類(エレメント) => 1
document.getElementById('inner').firstChild.nodeType; //ノードの種類(テキスト) => 3
nodeTypeの値は以下の通り。
| 名称 | 値 |
|---|---|
| ELEMENT_NODE | 1 |
| ATTRIBUTE_NODE | 2 |
| TEXT_NODE | 3 |
| CDATA_SECTION_NODE | 4 |
| ENTITY_REFERENCE_NODE | 5 |
| ENTITY_NODE | 6 |
| PROCESSING_INSTRUCTION_NODE | 7 |
| COMMENT_NODE | 8 |
| DOCUMENT_NODE | 9 |
| DOCUMENT_TYPE_NODE | 10 |
| DOCUMENT_FRAGMENT_NODE | 11 |
| NOTATION_NODE | 12 |
メソッド
子要素の追加 appendChild, insertBefore
const div = document.createElement("div");
const p1 = document.createElement("p");
p1.id = "p1";
const p2 = document.createElement("p");
p2.id = "p2";
div.appendChild(p1);
div.appendChild(p2);
console.log(div.outerHTML);
// => "<div><p id="p1"></p><p id="p2"></p></div>"
const p3 = document.createElement("p");
p3.id = "p3";
div.insertBefore(p3,p2);
console.log(div.outerHTML);
// => "<div><p id="p1"></p><p id="p3"></p><p id="p2"></p></div>"
子要素の除外 removeChild
const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
console.log(div.outerHTML);
// => "<div><p></p></div>"
div.removeChild(p);
console.log(div.outerHTML);
// => "<div></div>"
子要素の差し替え replaceChild
const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
console.log(div.outerHTML);
// => "<div><p></p></div>"
const newspan = document.createElement("span");
const content = document.createTextNode("テスト");
newspan.appendChild(content);
div.replaceChild(newspan, p);
console.log(div.outerHTML);
// => "<div><span>テスト</span></div>"
判定 contains , hasChildNodes
<div id="box1"><p id="p1">テスト1</p><div><p id="p2">テスト2</p></div></div>
<div id="box2"></div>const box1 = document.getElementById('box1');
const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');
// 指定した要素を子ノードとして持っているかの判定
console.log(box1.contains(p1)); // 子ノードに存在する true
console.log(box2.contains(p2)); // 子ノードではなく子孫ノードとして存在する false
// 子ノードとして持っているかの判定
console.log(box1.hasChildNodes()); // true
console.log(box2.hasChildNodes()); // false
ノードのコピー(複製) cloneNode
const div = document.createElement("div");
const newspan = document.createElement("span");
const content = document.createTextNode("テスト");
newspan.appendChild(content);
const p1 = document.createElement("p");
p1.id = "p1";
p1.appendChild(newspan);
const p2 = p1.cloneNode(false); // 引数 falseで子孫ノードはコピーしない
p2.id = "p2";
const p3 = p1.cloneNode(true); // 引数 trueで子孫ノードを含めてコピーする
p3.id = "p3";
div.appendChild(p1);
div.appendChild(p2);
div.appendChild(p3);
console.log(div.outerHTML);
// => "<div><p id="p1"><span>テスト</span></p><p id="p2"></p><p id="p3"><span>テスト</span></p></div>"