【JavaScript / DOM】関係要素ノードの取得 - 親子孫兄弟の要素ノードを取得する
JavaScriptの関係要素ノードを取得する方法を解説します。
関係要素ノード
とあるノードに対して親や子、兄弟の関係を持つ要素ノードはプロパティで取得できます。
親要素ノード（parentElement）
ノードの親要素ノードを取得するには、parentElementプロパティを使います。
<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.parentElement);
</script><div>...</div>子要素ノード（children）
ノードの子要素ノードを取得するには、childrenプロパティを使います。
<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.children);
</script>HTMLCollection(3) [p, div, p]最初の要素ノード（firstElementChild）
ノードの最初の子要素ノードを取得するには、firstElementChildプロパティを使います。
<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.firstElementChild);
</script><p>CCCCC</p>最後の子要素ノード（lastElementChild）
ノードの最後の子要素ノードを取得するには、lastElementChildプロパティを使います。
<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.lastElementChild);
</script><p>EEEEE</p>前の兄弟要素ノード（previousElementSibling）
ノードの前の兄弟要素ノードを取得するには、previousElementSiblingプロパティを使います。
<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.previousElementSibling);
</script>
次の兄弟要素ノード（nextElementSibling）
ノードの次の兄弟要素ノードを取得するには、nextElementSiblingプロパティを使います。
<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.nextElementSibling);
</script><p>FFFFF</p>
