網頁

2021/3/6

JavaScript DOM node.nextSibling 與 element.nextElementSibling 差別

JavaScript DOM的node.nextSiblingelement.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-1div-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-1div-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 則留言: