今回は、「Node（ノード）」の使い方の中でも、「親子・兄弟関係」について見ていきましょう。
前回の記事で、DOMツリーの説明をした時にノードについて簡単にご説明させて頂きましたが、覚えていらっしゃるでしょうか。
今回の説明の中で親子関係がよくわからない時は、DOMツリーで確認するとどのような構造になっているのかイメージしやすいと思います。
ぜひ合わせてご覧になられてください。
ノードの親子・兄弟関係
DOMでは各ノードが階層構造になっていて、特定のノードから見ると、それぞれが親子関係になっていたり、兄弟関係になっていたりします。
例えば、「head」や「body」は「html」の子になり、逆に「html」は「head」や「body」の親になります。
言葉では少し分かりにくい所もありますので、親子関係や兄弟関係等の取得方法を学習しながら、理解を深めてください。
childNodes
HTML
<body>
<header>
<h1 id="sample">getElementByIdを取得する</h1>
</header>
<section id="sector1">
<h2 id="fruits">果物</h2>
<p>ばなな</p>
<p>りんご</p>
<p>ぶどう</p>
<p>オレンジ</p>
<p>いちご</p>
</section>
<section id="sector2">
<h2>動物</h2>
<ul>
<li>犬</li>
<li>猫</li>
<li>鳥</li>
<li>パンダ</li>
</ul>
</section>
<script type="text/javascript" src="main.js"></script>
</body>
let element = document.getElementById("sector1");
let children = element.childNodes;
let leng = children.length;
console.log("ノード数：" + leng);
for (let i = 0; i < leng; i++) {
console.log(children.item(i).nodeName);
}
「childNodes」は、指定したノードの一つ下の階層にある子ノードを取得します。
ここでは、「sector1」の子ノードを取得しています。
ノード数：13 #text H2 #text P #text P #text P #text P #text P #text
コンソールに、ノード数が13と表示されています。
しかしコードを見ると、子ノードには、「h2」と「p」が5つの合計6個しかありません。
これは前回の記事でもご説明させて頂きましたが、それぞれのノードの間に空白ノードが含まれているためです。
HTMLのコードの書き方によって空白ノードの数は変わりますので、注意してください。
最初の子ノードと最後の子ノードを取得する
let element = document.getElementById("sector1");
let first = element.firstChild;
let last = element.lastChild;
最初の子ノードを取得するには、「firstChild」を、最後の子ノードを取得するには、「lastChild」を記述します。
「childNodes」との関係は以下になります。
element.firstChild; === element.childNodes[0];
element.lastChild === element.childNodes [element.childNodes.length – 1];
兄弟ノードを取得する
同じ階層のノードは兄弟（Siblings）関係にあると言います。
前にあるノードは、「previousSibling」、次にあるノードは、「nextSibling」で取得します。
let previous = element.previousSibling; let next = element.nextSibling;
親ノードを取得する
親ノードを取得するには、「parentNode」で取得します。
let parent = element.parentNode; console.log(parent); body
要素ノードのみ取得する
すべての子要素ノードを取得する
let element = document.getElementById("sector1");
let child = element.children;
console.log(child);
「children」を使うと、要素ノードのみ取得することが出来ます。
戻り値は、HTMLコレクションになります。
HTMLCollection(6) 0: h2#fruits 1: p 2: p 3: p 4: p 5: p fruits: h2#fruits length: 6
ノードごとのテキストを返すには、以下のように記述します。
for (let i = 0; i < element.children.length; i++) {
console.log(element.children.item(i).textContent);
}
果物
ばなな
りんご
ぶどう
オレンジ
いちご
その他の要素ノードの指定方法
node.firstElementChild：最初の子要素のノードを取得
node.lastElementChild：最後の子要素のノードを取得
node.previousElementSibling：一つ前にある要素ノードを取得
node.nextElementSibling：次の要素ノードを取得
node.parentElement：親要素のノードを取得
あとがき
親子・兄弟関係について、少しは理解して頂けたでしょうか。
書き方自体は難しくないと思いますので、それぞれのノードの関係性をしっかりと理解しておきましょう。
細かい使い方は、実際のコードで学習していくのが良いと思います。
今回も最後までお読み頂きありがとうございました。
