【JavaScript / DOM】関係ノードの取得 - 親子孫兄弟のノードを取得する
JavaScriptの関係ノードを取得する方法を解説します。
関係ノード
とあるノードに対して親や子、兄弟の関係を持つノードはプロパティで取得できます。
親ノード（parentNode）
ノードの親ノードを取得するには、parentNodeプロパティを使います。
<div>
<p>AAAAA</p>
<p>BBBBB</p>
<div id="box">
<p>CCCCC</p>
<div>
<p>DDDDD</p>
</div>
<p>EEEEE</p>
</div>
<p>FFFFF</p>
<p>GGGGG</p>
</div>
<script type="text/javascript">
let element = document.getElementById("box");
console.log(element.parentNode);
</script><div> ... </div>全ての子ノード（childNodes）
ノードの全ての子ノードを取得するには、childNodesプロパティを使います。
<div>
<p>AAAAA</p>
<p>BBBBB</p>
<div id="box">
<p>CCCCC</p>
<div>
<p>DDDDD</p>
</div>
<p>EEEEE</p>
</div>
<p>FFFFF</p>
<p>GGGGG</p>
</div>
<script type="text/javascript">
let element = document.getElementById("box");
console.log(element.childNodes);
</script>[text, p, text, div, text, p, text]※ HTMLドキュメントの改行コードもノードとなります。
最初の子ノード（firstChild）
ノードの最初の子ノードを取得するには、firstChildプロパティを使います。
<div>
<p>AAAAA</p>
<p>BBBBB</p>
<div id="box">
<p>CCCCC</p>
<div>
<p>DDDDD</p>
</div>
<p>EEEEE</p>
</div>
<p>FFFFF</p>
<p>GGGGG</p>
</div>
<script type="text/javascript">
let element = document.getElementById("box");
console.log(element.firstChild);
</script>#text最後の子ノード（lastChild）
ノードの最後の子ノードを取得するには、lastChildプロパティを使います。
<div>
<p>AAAAA</p>
<p>BBBBB</p>
<div id="box">
<p>CCCCC</p>
<div>
<p>DDDDD</p>
</div>
<p>EEEEE</p>
</div>
<p>FFFFF</p>
<p>GGGGG</p>
</div>
<script type="text/javascript">
let element = document.getElementById("box");
console.log(element.lastChild);
</script>#text前の兄弟ノード（previousSibling）
ノードの前の兄弟ノードを取得するには、previousSiblingプロパティを使います。
<div>
<p>AAAAA</p>
<p>BBBBB</p>
<div id="box">
<p>CCCCC</p>
<div>
<p>DDDDD</p>
</div>
<p>EEEEE</p>
</div>
<p>FFFFF</p>
<p>GGGGG</p>
</div>
<script type="text/javascript">
let element = document.getElementById("box");
console.log(element.previousSibling);
</script>#text次の兄弟ノード（nextSibling）
ノードの次の兄弟ノードを取得するには、nextSiblingプロパティを使います。
<div>
<p>AAAAA</p>
<p>BBBBB</p>
<div id="box">
<p>CCCCC</p>
<div>
<p>DDDDD</p>
</div>
<p>EEEEE</p>
</div>
<p>FFFFF</p>
<p>GGGGG</p>
</div>
<script type="text/javascript">
let element = document.getElementById("box");
console.log(element.nextSibling);
</script>#text
