JS ノードの親子・兄弟関係を理解する ノードの指定方法一覧

JS ノード 親子・兄弟関係 Java Script
スポンサーリンク

今回は、「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:親要素のノードを取得

スポンサーリンク

あとがき

親子・兄弟関係について、少しは理解して頂けたでしょうか。

書き方自体は難しくないと思いますので、それぞれのノードの関係性をしっかりと理解しておきましょう。

細かい使い方は、実際のコードで学習していくのが良いと思います。

今回も最後までお読み頂きありがとうございました。

タイトルとURLをコピーしました