ノードの子・親・兄弟ノードを取得(Node: ###プロパティ)

(Web API > Node)
https://developer.mozilla.org/ja/docs/Web/API/Node

HTML ページに含まれるノードは階層構造になっており、その中の特定のノードに対して一つ上の階層にある親ノードや一つ下の階層にある子ノード、そして同じ階層にある兄弟ノードがあるが、これらのノードは Node オブジェクトで用意されている各種プロパティを参照することで取得することができる。

すべての子ノードを取得する

node.childNodes

Document オブジェクトの getElementById メソッドや querySelector メソッドなどを使って要素ノードを取得したあと、 Node オブジェクトの childNodes プロパティを参照することで、このノードの 1 つ下の階層にある子ノードをすべて取得することができる。

let element = document.getElementById('main');
let children = element.childNodes;

let len = children.length; // 取得したノードの数を取得(※)
let element = children.item(0); // インデックスを指定して Node オブジェクトを取得
let element = children[0]; // 次の形式でもインデックスを指定して Node オブジェクトを取得

(※)DOM の中では要素と要素の間に空白やタブ、改行文字がある場合は空白のtextノードとして扱われる(ノード数としてカウントされる)ため注意が必要である。

最初の子ノードと最後の子ノードを取得する

node.firstChild
node.lastChild

特定のノードの子ノードの中で最初と最後の子ノードを取得する。

let element = document.getElementById('main');
let first = element.firstChild;
let last = element.lastChild;

同じ階層の次のノードと前のノードを取得する

node.nextSibling
node.previousSibling

特定のノードの同じ階層にある次のノードと一つ前のノードを取得する。

let element = document.getElementById('main');
let next = element.nextSibling; // 次のノードを取得
let prev = element.previousSibling; // 一つ前のノードを取得

親ノードを取得する

node.parentNode

特定のノードの親ノードを取得する。

let element = document.getElementById('main');
let parent = element.parentNode;
inserted by FC2 system