DOMの(next/previous)SiblingとElementSiblingの値

(2018-07-04)

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 "
"
*/