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 則留言:
謝謝分享
張貼留言