網頁

▼

2021/3/6

JavaScript DOM node.nextSibling 與 element.nextElementSibling 差別

JavaScript DOM的node.nextSibling與element.nextElementSibling差別如下。

node.nextSibling返回同父節點的下個node物件；
element.nextElementSibling則返回同父節點的下個element物件。

node物件是DOM樹中的任意型態的物件，包括html標籤(<div>、<input>、<p>)、文字(text node)、註解(comment node)等；而element物件屬於node物件的一種，也就是html標籤。

例如下面的node.nextSibling返回div-1 element的下個node物件，也就是"中間的文字"(text node)；
element.nextElementSibling則返回div-1 element的下個element物件，也就是div-2(element node)。

<html>
<body>
    <div id="div-1">div-1的文字</div>中間的文字<div id="div-2">div-2的文字</div>
</body>
<script>
window.onload = function() {
  let selectAction = document.getElementById("div-1");
  console.log(selectAction.nextSibling); // "中間的文字"
  console.log(selectAction.nextElementSibling); // <div id="div-2">div-2的文字</div>
};
</script>
</html>

console印出以下。

"中間的文字"
<div id="div-2">div-2的文字</div>

把內容修改如下，可看到node.nextSibling返回的下個node物件變成#text，這其實是div-1與div-2之間的縮排空白。

<html>
<body>
    <div id="div-1">div-1的文字</div>
    <div id="div-2">div-2的文字</div>
</body>
<script>
window.onload = function() {
  let selectAction = document.getElementById("div-1");
  console.log(selectAction.nextSibling); // #text
  console.log(selectAction.nextElementSibling); // <div id="div-2">div-2的文字</div>
};
</script>
</html>

console印出以下。

#text
<div id="div-2">div-2的文字</div>

所以若div-1和div-2間不要有任何文字、註解、斷行或空白，則返回的都是div-1的下個node，也就是div-2

<html>
<body>
    <div id="div-1">div-1的文字</div><div id="div-2">div-2的文字</div>
</body>
<script>
window.onload = function() {
  let selectAction = document.getElementById("div-1");
  console.log(selectAction.nextSibling); // <div id="div-2">div-2的文字</div>
  console.log(selectAction.nextElementSibling); // <div id="div-2">div-2的文字</div>
};
</script>
</html>

console印出以下。

<div id="div-2">div-2的文字</div>
<div id= "div-2">div-2的文字</div>


最近又開始維護JSP頁面的工作，用JavaScript操作HTML DOM的東西都忘光了。



1 則留言: