前端生涯

<ul>
<li>item1</li>
<li id="item2">item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>

想取得#item2的前後同層級的元素，可使用
previousElementSibling  取得同層上一個元素
nextElementSibling  取得同層下一個元素

let item2 = document.getElementById('item2');
console.log(item2.nextElementSibling);
console.log(item2.previousElementSibling);

print出來將會是

<li>item3</li>
<li>item4</li>

也許你也看過previousSibling、nextSibling屬性
他們與previousElementSibling、nextElementSibling其實大同小異
我們來測試一下兩者之間有什麼不同

let item2 = document.getElementById('item2');
console.log(item2.nextSibling);
console.log(item2.previousSibling);

你會發現print出來的東西為

#text
#text

那是因為previousSibling、nextSibling會返回文字節點(DOM 中的空白符)
而previousElementSibling、nextElementSibling只會回傳元素

相當於JQuery的prev()、next()