JavaScriptの学習・参考リファレンス/ドキュメント

JavaScript、ECMAScriptの学習と参考メモ 入門~初心者~中級者~上級者を目指して

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>"
作成日 : 2021年01月07日