元素節點屬性

childNodes和firstChild和lastChild

1.childNodes //獲取當前元素節點的所有的子節點

舉個小例子：

運行結果返回了一個節點列表：

節點列表是裝有當前元素節點所有的子節點

我們可以看一下當前節點列表的長度：

運行結果為3：

這三個元素節點分别就是em、strong和文本内容

這時候就要涉及到我們之前學的DOM節點的三種類型

元素節點 文本節點 屬性節點

這三個節點又有三個非常重要的屬性：

分别為：nodeName、nodeType和nodeValue

對于這三個屬性不同節點類型轉換出來的效果不一樣

例如：document.getElementById(‘box’).nodeType; //返回1就為元素節點

★★★

childNodes包括的節點有元素節點和文本節點兩種

舉個小例子：

運行結果對應上面表應該為節點名稱em，1和null

同樣我們再來看一下文本節點：

運行結果為#text、3和文本内容

2.firstChild和lastChild //找到當前元素節點的首位和末位

舉個小例子：

運行結果為EM和strong

以上就是元素節點屬性的方法

删除空白節點

我們還是拿上面的例子來看：

運行結果如下：

那麼為什麼我們改變div的書寫格式後，會顯示出5個元素節點呢？

我們來分析一下這5個節點：

1.div到em的空白

2.em

3.文本内容

4.strong

5.strong到div的空白

我們去給它進行回車、換行、tab鍵、空格等，它裡面的元素節點就會有變化

因為我們不需要這些空白節點，我們如何将這些空白節點給去除呢？

在我們去除空白節點之前，先要識别空白節點

通過正則表達式來識别空白節點，這裡先給大家寫一下這次用到的正則表達式，後面會詳細講到。

/^\s $/.test()

使用這個正則來進行驗證，如果符合返回true，否則返回false

我們先來驗證一下：

運行結果如下，空格時為true，有字符時為false：

我們這樣就可以封裝一個函數來進行删除空白節點：

運行結果為：

我們來返回一下文本類型nodeType未删除之前和删除之後分别有幾個：

運行結果未删之前為3，删除之後為1如下：

從這裡也可以看出，多出來的兩個元素節點的類型為文本

但是我們上面的正則表達式 /^s $/.test() 它原來數據上的子節點并沒有發生變化，隻是在調用函數時有效果，空白節點還依然存在。

對于這種情況我們就需要firstChild和lastChild這兩個

因為這兩種方法必須從父節點上删除空白節點，這時候就需要我們重新去封裝函數

運行結果如下：

首先它的數量變為了3，它的firstChild變為了EM

注意：

這裡删除數組元素的時候必須要倒叙删除！正着删除會混亂。

- 寫作不易，大家多多關注，謝謝啦-

---web分享，分享的不隻是web

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!