Siblingは兄弟姉妹という意味
<ul>
<li>1</li>
<li id="li2">2</li><li>3</li>
</ul>
<script>
const el = document.querySelector("li#li2");
</script>
Sibling
elのpreviousSiblingを取ると<li>1</li>になると思いきや、その直前の空白や改行を含むtext nodeが返る。
それらが全くない場合隣のElementが返ることになる。
const el2 = el.previousSibling;
console.log(`previousSibling: ${el2.nodeName} "${el2.textContent}"`);
/*
#text "
"
*/
const el4 = el.nextSibling;
console.log(`nextSibling: ${el4.nodeName} "${el4.textContent}"`); // LI "3"
ElementSibling
多くの場合で意図した結果が返るのはこっち。
const el3 = el.previousElementSibling;
console.log(`previousElementSibling: ${el3.nodeName} "${el3.textContent}"`); // LI "1"
const el5 = el.nextElementSibling;
console.log(`nextElementSibling: ${el5.nodeName} "${el5.textContent}"`); // LI "3"
firstChildとfirstElementChildなどの関係も同じ。存在を忘れていてひっかかった。
const el6 = document.querySelector("ul").firstChild;
console.log(`firstChild: ${el6.nodeName} "${el6.textContent}"`);
/*
fistChild: #text "
"
*/