JavaScript

最終更新日：
公開日：

レシピ

HTML・DOM

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

特定の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コードは冒頭と同じものを使います。

JS コード例

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


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


// パターン2：全ての子要素を配列形式のプロパティで参照
for(let 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：最初の子要素を取得
let first_child_element = list_element.firstElementChild;
console.log(first_child_element.textContent); // テキスト1


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


// パターン5：4つ目の子要素を取得
let 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要素から隣り合う要素を参照したり、親要素を参照していきます。

JS コード例

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

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


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


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


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


// パターン4：指定した親要素を取得
let parent_element2 = first_child_element.closest('ul');
console.log(parent_element2.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要素が親要素です。

パターン4はclosestメソッドを使った方法です。
closestメソッドにセレクタを指定すると、該当する親要素を取得することができます。
セレクタを使うことができるので、取得したい親要素のHTML要素名、id属性やclass名など様々な指定することができ、検索も直接の親要素だけでなく階層を遡ることができるため非常に便利です。

closestメソッドのより詳しい使い方については別記事「指定した親要素を取得する」を参照ください。

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

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

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

関連記事

前のページへ 一覧に戻る 次のページへ