木構造の各要素ノード
DOMのルートノードはdocumentで<html>要素がその唯一の子ノード。
<html>には2つの子ノード(
ノードの種類
- 親ノード
- 子ノード
- 子孫ノード
- 祖先ノード
document
documentも含めDOMツリーの各ノードはクラスNodeのインスタンス。
Nodeのオブジェクトはプロパティとして親や子の要素を表すparentNodeやchildeNodesを持っているほかnodeNameやnodeTypeといった識別のためのプロパティも持っている。
<script>
console.log('その客は');
コンソールに表示される。
console.log(document instanceof Node);//true
instanceof 演算子でオブジェクトが特定のクラスに属しているのかを確認することができます。
出典
documentはNodeクラスのインスタンスなのでtrue
console.log(document.parentNode); //null
documentには親のノードがいない
console.log(document.childNodes);
// NodeList(2) [<!DOCTYPE html>, html.client-nojs]
documentの子要素を表す。
console.log(document.nodeType); //9
.nodeType ノードの種類を取得
出典
console.log(document.nodeName);//#document
.nodeName ノードの名前を取得
出典
const children = document.childNodes;
console.log(`子供の数${children.length}`); //子供の数２
.length 子要素の数を表示
console.log(children[0]);
console.log(children[0].nodeType);
console.log(children[1]);
console.log(children[1].nodeType);
console.log(children[2]);
console.log(Node.ELEMENT_NODE);
console.log(children[1].nodeType === Node.ELEMENT_NODE);
console.log(Node.TEXT_NODE);
console.log(children[1].childNodes[1].childNodes);
</script>
感想
まだわからないことだらけだ。
勉強しよう。
出典