JavaScript

レシピ

HTML・DOM

特定のHTML要素の子要素、親要素、前後の要素を取得する

特定の要素の子要素や親要素、または前後にある要素を取得する方法について解説します。

この記事のポイント

  • ページ上のHTML要素は全て親子関係になる
  • 隣り合う要素はpreviousElementSiblingプロパティnextElementSiblingプロパティで参照する

目次

HTML要素の親子関係について

JavaScriptはページ上のHTMLをDOM(Document Object Model)という、HTML要素が親子関係になったツリー状のイメージを使ってアクセスを行います。
例えば、body要素に次のようなHTML要素を持つページがあるとします。

HTMLコード例

<body>
  <h1>JavaScriptレシピ</h1>
  <ul id="list1">
    <li>テキスト<strong>1</strong></li>
    <li>テキスト<strong>2</strong></li>
    <li>テキスト<strong>3</strong></li>
    <li>テキスト<strong>4</strong></li>
    <li>テキスト<strong>5</strong></li>
  </ul>
</body>

こちらのHTMLをDOMのツリーで表現すると次のようになります。

body要素以下のDOMツリー

body要素の直下にはh1要素ul要素がありますが、body要素から見てこの2つの要素は「子要素(または子孫要素)」と位置付けられます。
反対に、h1要素ul要素から見るとbody要素は「親要素」にあたります。
これがHTML要素同士の親子関係です。

同様に、ul要素の直下にある5つのli要素ul要素の子要素、そしてli要素からみてul要素は親要素です。

HTML要素が親子関係であることを前提として、親要素から子要素を参照したり、逆に子要素から親要素を参照することが可能になります。

親要素から子要素を参照する

ここからはコードを使って、親要素から子要素を参照するいくつかのパターン解説していきます。

以下の例では、最初に親要素としてul要素を取得した後に各メソッドを使って子要素を参照していきます。
なお、HTMLコードは冒頭と同じものを使います。

コード例

// 指定したid属性のHTML要素を取得
var list_element = document.getElementById("list1");


// パターン1:子要素の数を取得
var child_nodes_count = list_element.childElementCount;
console.log(child_nodes_count); // 5


// パターン2:全ての子要素を配列形式のプロパティで参照
for(var i=0; i<child_nodes_count; i++) {
	console.log(list_element.children[i].textContent);
}
// 0:テキスト1
// 1:テキスト2
// 2:テキスト3
// 3:テキスト4
// 4:テキスト5


// パターン3:最初の子要素を取得
var first_child_element = list_element.firstElementChild;
console.log(first_child_element.textContent); // テキスト1


// パターン4:最後の子要素を取得
var last_child_element = list_element.lastElementChild;
console.log(last_child_element.textContent); // テキスト5


// パターン5:4つ目の子要素を取得
var s_element = list_element.querySelector('li:nth-child(4) strong');
console.log(s_element.textContent); // 4

今回の例はul要素を親要素、その直下のli要素を子要素とするため、次のようなイメージになります。

ul要素のDOMツリーのイメージ

パターン1はul要素の直下にある子要素の数をchildElementCountプロパティから取得します。
その後、その値を上限とするfor文で子要素の数だけループ処理を繰り返し、配列形式になったchildrenプロパティから子要素のテキストを参照していきます。
上の図でいうと1番目のli要素から順に参照していくイメージです。

パターン3のfirstElementChildプロパティは直下にある最初の子要素(1番のli要素)を取得することができます。
パターン4はその対になるlastElementChildプロパティで、直下の最後の子要素(5番のli要素)を取得します。

パターン5のquerySelectorメソッドはCSSのようにセレクターで取得する要素を指定することができます。
このメソッドを使うと直下の子要素のみでなく、「子要素の子要素」のような子孫要素も参照することができます。
また、「nth-child」のように参照する子要素の番号を直接指定できる点も便利です。

子要素から親要素や隣り合う前後の要素を参照する

子要素からは親要素を参照したり、同じ階層にある前後の要素を参照することができます。

以下の例では最初にid属性list1」からfirstElementChildプロパティで1つ目のli要素を取得します。
その後、そのli要素から隣り合う要素を参照したり、親要素を参照していきます。

コード例

// 指定したid属性のHTML要素を取得
var list_element = document.getElementById("list1");

// 1つ目のli要素を取得
var first_child_element = list_element.firstElementChild;
console.log(first_child_element.textContent); // テキスト1


// パターン1:隣り合う次の要素を取得
var next_element = first_child_element.nextElementSibling;
console.log(next_element.textContent); // テキスト2


// パターン2:隣り合う前の要素を取得
var prev_element = next_element.previousElementSibling;
console.log(prev_element.textContent); // テキスト1


// パターン3:親要素を取得
var parent_element = first_child_element.parentNode;
console.log(parent_element.id); // list1

パターン1はnextElementSiblingプロパティを使って、1つ目のli要素に隣り合う要素(テキスト2のli要素)を取得します。
ここで取得した要素は変数next_elementに入れていますが、ここからまたnextElementSiblingプロパティを使うと3つ目のli要素(テキスト3のli要素)を取得できます。

パターン2は反対にpreviousElementSiblingプロパティを使って、1つ目のli要素を改めて取得します。
previousElementSiblingプロパティnextElementSiblingプロパティの対になるプロパティで、この2つのプロパティを使うことで隣り合った要素を順番に参照していくことができます。

もし、1つ目のli要素previousElementSiblingプロパティを参照したり、最後のli要素nextElementSiblingプロパティを参照すると「null」が戻り値になります。

パターン3はparentNodeプロパティを参照して親要素を取得して、idプロパティを出力します。
今回はid属性に「list1」を持つul要素が親要素です。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。