JavaScript DOM節點樹操作總結

前言：開啟乙個頁面，載入完html檔案後，瀏覽器首先做的就是解析html**並開始繪製節點樹，也就是說，我們刪除標籤元素，新增標籤元素，改變標籤元素的大小，改變標籤元素的內容，其實就是在刪除dom節點，新增dom節點，改變dom節點的大小，也就是說在dom節點樹上進行操作。

這是乙個很簡單的節點樹，相當於這棵節點說的根，也稱為文件節點，文件節點有且只有乙個。文件節點下也只有乙個子節點，那就是標籤，我喜歡把它比作這棵節點樹的主幹，而,標籤是標籤的子節點，就是主幹上的兩條分支。在,下又有更多的子節點，更多分支。

可以通過childnodes獲取到該節點下的所有子節點類陣列(nodelist類陣列

)，nodelist類陣列與我們以前見到的arguments類陣列不同的是，nodelist類陣列有length屬性。

猜一下輸出結果吧。我相信沒有接觸過的朋友可能會說有3個li標籤，那就是有3個子節點。或者是說4個節點，文字也算乙個節點。

但是輸出結果其實是7.

但是在ie8及ie8以下瀏覽器輸出的是4

總結：其實在li標籤之間還存在空白符，而空白符也被算是乙個節點。我們試著不換行就行了。（文字節點前後不會產生空白符，因為空白符也是文字節點）

這時候不存在空白符就輸出了4了

輸出結果

從輸出結果終於可以看出那"神奇"的空白符節點的廬山真面目了，空白符節點也歸類於文字節點。

像上面例子中，我們接觸到了三個節點型別：元素節點，文字節點。而我們比較長用到的就是元素節點跟文字節點了。像上面的例子，如果我們要剔除文字節點帶來的困擾，我們可以通過判斷他的節點型別。

元素節點的nodetype值為1；

文字節點的nodetype值為3;

document的nodetype值為9；

這時候就輸出3了，有3個li標籤，所以只有3個元素節點。

文字節點普通元素節點

輸出結果

這空白符節點的真是一片空白呀！

②insertbefore：在子節點的最後一位插入新節點

③、insertbefore：

在第乙個子節點前面插入新節點

④、insertbefore：

在任意元素子

節點前面插入新節點

前面的例子已經展示過空白符文字節點帶來的困擾，要排除空白符

文字節點帶來的困擾，我們需要進行其他處理下。

這樣我們只需要輸入對應的元素子節點的索引，就可以往其前面插入子節點了。

⑤、insertbefore：

多次插入同乙個新節點時出現的問題

執行**：

發現並沒有想象中的新增三個new item，而只是新增乙個而已。只是因為我們第一次新增新節點後，new item已經是文件節點的一部分了，如果我們進行第二次新增，那結果就是將該新節點從原來的位置轉移到新位置。任何dom節點不能同時出現在文件中的多個位置上。

執行**：

這時就很好的解決乙個節點無法多次新增問題。clonenode() 方法能轉殖節點所有屬性，（如果類名，屬性），但是想要轉殖節點的後代，如上面newli裡面的（內容）文字節點，就得加上引數true了。

執行**會發現，並不是出現三個"new item"，而是只有乙個"new item"。這是因為當替換乙個節點時，該節點的所有關係指標都會被從被它替換的節點複製過來。就是說我們替換第二個元素子節點的時候，newli已經是第乙個元素子節點了，相當於我們先移除第二個元素子節點，然後把已經變成第乙個元素子節點的newli移到第二個元素子節點的位置上。

有就返回true，沒有就返回false。

被移除的節點仍然未文件節點中（既是上面說的節點樹的根中），只不過在文件節點中已經沒有了它的位置了。

JavaScript DOM節點樹操作總結

javascript DOM 獲取節點

javascript DOM節點元素

JavaScript DOM節點操作總結

JavaScript DOM節點樹操作總結

javascript DOM 獲取節點

javascript DOM節點 元素

JavaScript DOM節點操作總結

相關推薦

javascript DOM節點元素