JavaScriptで親、子、兄弟要素の取得 #JavaScript

JavaScriptで親、子、兄弟要素の取得について、よく忘れるのでメモ

html

<div class="parent">
  親要素
  <div class="prev">直前にある兄弟要素</div>
  <div class="base">
    基準の要素
    <div class="child">子要素</div>
    <div class="child">子要素</div>
    <div class="child">子要素</div>
  </div>
  <div class="next">直後にある兄弟要素</div>
</div>

JavaScript(親要素)

const base = document.querySelector(".base");
const parent = base.parentNode;

JavaScript(小要素)

const base = document.querySelector(".base");
const children = base.children;

JavaScript(小要素(最初))

const base = document.querySelector(".base");
const firstChild = base.firstElementChild;

JavaScript(小要素(最後))

const base = document.querySelector(".base");
const lastChild = base.lastElementChild;

JavaScript(兄弟要素（直前）)

const base = document.querySelector(".base");
const previousSibling = base.previousElementSibling;

JavaScript(兄弟要素（直後）)

const base = document.querySelector(".base");
const nextSibling = base.nextElementSibling;

[参考]
https://haniwaman.com/javascript-relative-element/