html節點樹分享(html元素間的空格會在節點樹上產生一個text節點)
阿新 • • 發佈:2019-02-04
這個小知識點也是我偶然遇到的~~搞了半天才弄懂
根據w3c的HTML DOM標準,HTML中所有內容都是節點,當我用原生js獲取dom中的某個節點時,卻沒有拿到我想拿到的節點。。。
html結構是這樣的: |
<div>
<div class="a">a節點</div>
<div class="b">b節點</div>
</div>
然後在我的js中div.b綁定了一個事件,事件源是div.b,在事件觸發時,我想要在事件函式中拿到div.a,程式碼是這樣:
var b = document.querySelector(".b" );
b.addEventListener('click',( e ) => {
//e.target == div.b
var a = e.target.previousSibing;
console.log( a ); //#text
});
按照我的想法上面js中的a就是div.a了,結果打印出來卻是#text。。。然後我又列印了下最外層div的所有子節點:
var b = document.querySelector(".b");
b.addEventListener('click',( e ) => {
//e.target == div.b
var a = e.target.parentNode.childNodes;
console.log( a ); //[ text, div.a, text, div.b, text]
});
最後才明白這些text節點就是html程式碼中的那些空格,假如我們將html程式碼這麼寫的話就不會出現這些text節點了:
<div><div class="a">a節點</div><div class="b">b節點</div></div>
我還是太菜了~~~繼續努力