5章 関連要素の取得

本章では、ある要素に関連する他の要素を取得する方法を学びます。ある要素に関連する要素とは以下のような要素のことです。

  • 親要素
  • 子要素
  • 隣接要素
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

このHTMLにおいて、以下のことが言えます。

  • 各li要素の親要素はulである
  • ul要素の子要素はli要素(3つ)である
  • li(item2)の隣接要素はli(item1)、li(item3)である

この章では、上記の例のようにある要素に対する親子要素、隣接要素を取得する方法を見ていきます。

5.1 親要素

まずは親要素から始めましょう。親要素を取得するにはparentNodeプロパティを使います。

var parent = element.parentNode;

elementが取得済みの要素オブジェクトです。その親要素を取得しています。

具体例で見てみましょう。

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
//2番めのliを取得
var li2 = document.querySelector('li:nth-child(2)');

//親要素(ul)の取得
var parent = li2.parentNode;

特に難しいことはないでしょう。

ところで、親要素を取得して何の意味があるのか、と思った人がいるかもしれません。この例では親要素はulですが、そもそもquerySelectorで直接ulを取得する方法もあるわけです。敢えて、子要素を介して取得する必要はないのではないか。これは半分は正しいです。実際に多くの場面では関連要素を取得するよりも、querySelectorなどの関数で直接取得したほうが簡単です。しかし、後の章で学ぶ要素の削除時や、また動的にDOM構造が変化するようなサイトなど、役に立つケースもあります。

5.2 子要素

次は子要素を取得します。子要素を取得するにはchildrenプロパティを使います。

var children = element.children;

childrenプロパティはHTMLCollection型で、子要素の複数の情報を持っています。厳密には配列とは違いますが、配列のようなものと考えてください。[]演算子で各要素を、lengthプロパティで子要素の数を取得することができるなど、配列と同じような機能もあります。

具体例を見てみましょう。

<div id="box">
  <h1>タイトル</h1>
  <p>本文です。</p>
</div>
//id=boxの要素を取得
var box = document.querySelector('#box');

//boxの子要素のリスト(h1とp)を取得
var children = box.children;

//各要素のテキスト表示
for(var i=0; i<children.length; i++){
    alert(children[i].textContent);
}

この例のようにfor文を使って、すべての子要素に対して処理をすることができます。

5.3 隣接要素

今度は隣接要素、つまり同階層の隣り合った要素を取得してみましょう。前隣の要素はpreviousElementSibling、後隣の要素はnextElementSiblingを使います。

var previous = element.previousElementSibling;
var next = element.nextElementSibling;
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
//ul下の2番めのliを取得
var li2 = document.querySelector('ul li:nth-child(2)');

//li2の前の要素を取得
var li1 = li2.previousElementSibling;
alert(li1.textContent);

//li2の後の要素を取得
var li3 = li2.nextElementSibling;
alert(li3.textContent);

5.4 まとめ

この章では関連要素の取得について学びました。関連要素へのアクセスを覚えれば、DOM内を自由に駆け巡ることができます。親から子を取得し、子の隣接要素を取得してさらにその子要素を・・・・とDOM構造を辿って好きな要素にアクセスできるのです。

Last Updated: 2018-5-10 17:49:38