【JavaScript / DOM】関係ノードの取得 - 親子孫兄弟のノードを取得する

JavaScript/DOMの『関係ノードの取得方法』について解説します。

検証環境

JavaScript -

macOS

14.1

関係ノード

JavaScript/DOMのノードはHTMLドキュメントの要素に従って親子関係（階層構造）を持ちます。

それらの関係ノードである親ノードや子ノード、兄弟ノードを表すプロパティが用意されています。

親ノード（parentNode）

親ノードを表すプロパティはparentNodeです。

基本構文

ノード.parentNode

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.parentNode);
    ___ih_hl_end
</script>

Console

<div id="parent">...</div>

子ノード（childNodes/firstChild/lastChild）

子ノードを表すプロパティは３つあります。

全ての子ノード（childNodes）

基本構文

ノード.childNodes

サンプル

全ての子ノードを表すプロパティはchildNodesです。

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.childNodes);
    ___ih_hl_end
</script>

Console

NodeList(9) [text, comment, text, div#child_first, text, div#child_middle, text, div#child_next, text]
  0: text
  1: comment
  2: text
  3: div#child_first
  4: text
  5: div#child_middle
  6: text
  7: div#child_next
  8: text

ノードにはテキストノード（改行・スペース含む）やコメントノードも含みます。

最初の子ノード（firstChild）

最初の子ノードを表すプロパティはfirstChildです。

基本構文

ノード.firstChild

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.firstChild);
    ___ih_hl_end
</script>

Console

#text
  ...省略...
  textContent: "\n        "
  ...省略

サンプルでは取得ノード（id属性値がtarget）の開始タグとコメントノード（）の間のテキストノード（\n ）が取得されています。

最後の子ノード（lastChild）

最後の子ノードを表すプロパティはlastChildです。

基本構文

ノード.lastChild

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.lastChild);
    ___ih_hl_end
</script>

Console

#text
  ...省略...
  textContent: "\n        "
  ...省略

サンプルでは取得ノード（id属性値がtarget）の終了タグと直前のdiv要素（id属性値がchild_last）の間のテキストノード（\n ）が取得されています。

兄弟ノード（previousSibling/nextSibling）

兄弟ノードを表すプロパティは２つあります。

前の兄弟ノード（previousSibling）

前の兄弟ノードを表すプロパティはpreviousSiblingです。

基本構文

ノード.previousSibling

サンプル

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.previousSibling);
    ___ih_hl_end
</script>

Console

#text
  ...省略...
  textContent: "\n        "
  ...省略

サンプルでは取得ノード（id属性値がtarget）の開始タグと直前のdiv要素（id属性値がsibling_pre）の間のテキストノード（\n ）が取得されています。

次の兄弟ノード（nextSibling）

基本構文

ノード.nextSibling

サンプル

次の兄弟ノードを表すプロパティはnextSiblingです。

sample.html

<div id="parent">
    <div id="sibling_pre"></div>
    <div id="target">
        <!-- comment -->
        <div id="child_first"></div>
        <div id="child_middle">
            <div id="grandchild"></div>
        </div>
        <div id="child_last"></div>
    </div>
    <div id="sibling_next"></div>
</div>

<script type="text/javascript">
    let node = document.getElementById("target");
    
    ___ih_hl_start
    console.log(node.nextSibling);
    ___ih_hl_end
</script>

Console

#text
  ...省略...
  textContent: "\n        "
  ...省略

サンプルでは取得ノード（id属性値がtarget）の終了タグと後ろのdiv要素（id属性値がsibling_next）の間のテキストノード（\n ）が取得されています。