【JavaScript】子要素・親要素・兄弟要素の取得方法

JavaScriptで子要素・親要素・兄弟要素を取得する方法を紹介します。

子要素の取得方法

子要素の取得にはchildrenを使用します。

childrenの取得結果は配列となるので、取得結果から各子要素を抽出したい場合はfor文などのループ処理を使うかlist[0]のように直接配列番号を指定しましょう。

以下は子要素内のテキストをコンソール出力するサンプルソースです。

F12キーで表示されるDevToolで「りんご」「ばなな」が出力されていることが確認できると思います。

HTML

<div id="element">
  ■果物
  <div>りんご</div>
  <div>ばなな</div>
</div>

JavaScript

// 参照要素を取得
var ele = document.getElementById('element');
// 子要素を取得
var children = ele.children;

for (var e of children) {
  // 子要素内のテキストをコンソール出力
  console.log(e.innerText);
}

１番目の子要素や最後の子要素のみ取得したい場合

childrenは対象の要素の子要素を全て取得しますが、firstElementChildは対象の要素の１番目の子要素を取得します。

先ほどの処理を１番目の子要素にだけ行いたい場合は以下のようにソースを書き換えることも可能です。

反対に、最後の子要素を取得したい場合はlastElementChildを使用します。

JavaScript

// 参照要素を取得
var ele = document.getElementById('element');
// １番目の子要素を取得
var child1 = ele.firstElementChild;
// １番最後の子要素を取得
var child2 = ele.lastElementChild;

// １番目の子要素内のテキストをコンソール出力
console.log(child1.innerText);
// １番最後の子要素内のテキストをコンソール出力
console.log(child2.innerText);

親要素の取得方法

親要素の取得にはparentNodeを使用します。

parentNodeの取得結果は単一ですので、childrenのように配列番号の指定は不要です。

HTML

<div id="element">
  ■果物
  <div id="apple">りんご</div>
  <div>ばなな</div>
</div>

JavaScript

// 参照要素を取得
var apple = document.getElementById('apple');
// 親要素を取得
var parent = apple.parentNode;
// 親要素内のテキストをコンソール出力
console.log(parent.innerText);

１番目の子要素や最後の子要素のみ取得したい場合

親要素やさらに先祖の要素を取得する方法としてclosestというものがあります。

closestには引数を指定でき、引数にマッチする一番近い先祖の要素を返します。

たとえば「id="base"」の要素を取得したい場合はclosest('#base')と記述します。

また参照要素もclosestの検索対象となるため、以下の例のようにclosest('div')とすると「id="apple"」の要素が取得されます。

HTML

<div id="base">
  <div id="element">
    ■果物
    <div id="apple">りんご</div>
    <div>ばなな</div>
  </div>
</div>

JavaScript

// 参照要素を取得
var apple = document.getElementById('apple');
// 「id=base」にマッチする先祖要素を取得
var baseEle = apple.closest('#base');
// id="base"の要素を出力
console.log(baseEle);
// 「属性=div」にマッチする先祖要素を取得
var divEle = apple.closest('div');
// id="apple"の要素を出力
console.log(divEle);

兄弟要素の取得方法

対象の要素と同階層にある前の要素の取得にはpreviousElementSiblingを、次の要素の取得にはnextElementSiblingを使用します。

また、対象の要素の「次の次の要素」はelement.nextElementSibling.nextElementSiblingとすることで取得が可能です。

HTML

<div>みかん</div>
<div id="apple">りんご</div>
<div>ばなな</div>

JavaScript

// 参照要素を取得
var apple = document.getElementById('apple');
// 同階層にある前の要素を取得
var prevEle = apple.previousElementSibling;
// 前の要素のテキストをコンソール出力
console.log(prevEle.innerText);
// 同階層にある次の要素を取得
var nextEle = apple.nextElementSibling;
// 次の要素のテキストをコンソール出力
console.log(nextEle.innerText);

まとめ

JavaScriptで子要素・親要素・兄弟要素を取得する方法について紹介しました。

今回は以上です。