childNodes和firstChild和lastChild1.childNodes //獲取當(dāng)前元素節(jié)點(diǎn)的所有的子節(jié)點(diǎn)運(yùn)行結(jié)果返回了一個(gè)節(jié)點(diǎn)列表：節(jié)點(diǎn)列表是裝有當(dāng)前元素節(jié)點(diǎn)所有的子節(jié)點(diǎn)我們可以看一下當(dāng)前節(jié)點(diǎn)列表的長(zhǎng)度：這三個(gè)元素節(jié)點(diǎn)分別就是em,、strong和文本內(nèi)容這時(shí)候就要涉及到我們之前學(xué)的DOM節(jié)點(diǎn)的三種類型元素節(jié)點(diǎn) 文本節(jié)點(diǎn) 屬性節(jié)點(diǎn)這三個(gè)節(jié)點(diǎn)又有三個(gè)非常重要的屬性：分別為：nodeName,、nodeType和nodeValue對(duì)于這三個(gè)屬性不同節(jié)點(diǎn)類型轉(zhuǎn)換出來(lái)的效果不一樣例如：document.getElementById(‘box’).nodeType; //返回1就為元素節(jié)點(diǎn)childNodes包括的節(jié)點(diǎn)有元素節(jié)點(diǎn)和文本節(jié)點(diǎn)兩種運(yùn)行結(jié)果對(duì)應(yīng)上面表應(yīng)該為節(jié)點(diǎn)名稱em，1和null同樣我們?cè)賮?lái)看一下文本節(jié)點(diǎn)：運(yùn)行結(jié)果為#text,、3和文本內(nèi)容2.firstChild和lastChild //找到當(dāng)前元素節(jié)點(diǎn)的首位和末位那么為什么我們改變div的書寫格式后,，會(huì)顯示出5個(gè)元素節(jié)點(diǎn)呢？我們來(lái)分析一下這5個(gè)節(jié)點(diǎn)：我們?nèi)ソo它進(jìn)行回車,、換行,、tab鍵、空格等,，它里面的元素節(jié)點(diǎn)就會(huì)有變化因?yàn)槲覀儾恍枰@些空白節(jié)點(diǎn),，我們如何將這些空白節(jié)點(diǎn)給去除呢？在我們去除空白節(jié)點(diǎn)之前,，先要識(shí)別空白節(jié)點(diǎn)通過(guò)正則表達(dá)式來(lái)識(shí)別空白節(jié)點(diǎn),，這里先給大家寫一下這次用到的正則表達(dá)式，后面會(huì)詳細(xì)講到,。使用這個(gè)正則來(lái)進(jìn)行驗(yàn)證,，如果符合返回true，否則返回false運(yùn)行結(jié)果如下,，空格時(shí)為true,，有字符時(shí)為false：我們這樣就可以封裝一個(gè)函數(shù)來(lái)進(jìn)行刪除空白節(jié)點(diǎn)：我們來(lái)返回一下文本類型nodeType未刪除之前和刪除之后分別有幾個(gè)：運(yùn)行結(jié)果未刪之前為3，刪除之后為1如下：從這里也可以看出,，多出來(lái)的兩個(gè)元素節(jié)點(diǎn)的類型為文本但是我們上面的正則表達(dá)式 /^s+$/.test() 它原來(lái)數(shù)據(jù)上的子節(jié)點(diǎn)并沒有發(fā)生變化,，只是在調(diào)用函數(shù)時(shí)有效果，空白節(jié)點(diǎn)還依然存在,。對(duì)于這種情況我們就需要firstChild和lastChild這兩個(gè)因?yàn)檫@兩種方法必須從父節(jié)點(diǎn)上刪除空白節(jié)點(diǎn),，這時(shí)候就需要我們重新去封裝函數(shù)
首先它的數(shù)量變?yōu)榱?，它的firstChild變?yōu)榱薊M這里刪除數(shù)組元素的時(shí)候必須要倒敘刪除,！正著刪除會(huì)混亂,。- 寫作不易，大家多多關(guān)注,，謝謝啦-
|
