element.childNodes怎么數(shù)個(gè)數(shù)

一開(kāi)始接觸到這個(gè)子節(jié)點(diǎn)個(gè)數(shù)的時(shí)候，每次調(diào)用length出現(xiàn)的數(shù)字總和我數(shù)的不一樣。在網(wǎng)上查找了一圈解釋都是一臉懵逼，只好自己自己動(dòng)手試驗(yàn)了。

• 第一回合

先寫(xiě)一個(gè)塊元素
<div></div> 這個(gè)塊元素有1個(gè)子節(jié)點(diǎn)，子節(jié)點(diǎn)類(lèi)型為3（文本類(lèi)型）。
這樣
<div>dvdv</div>
這樣
<div>dvdv
</div>、
還是這樣
<div>
    dvdvdv
</div>
childNodes都只有1個(gè)文本類(lèi)型的子節(jié)點(diǎn)。

• 第二回合

現(xiàn)在開(kāi)始仔細(xì)數(shù)
<div>dvdv<p>p1</p></div>這樣的話在原來(lái)的div元素里又添加了一個(gè)p的元素節(jié)點(diǎn)所以childNodes.length是2

但是這樣
<div>dvdv<p>p1</p>
</div>
在p元素的結(jié)束標(biāo)簽后面加上換行，div元素的childNodes.length就會(huì)多一個(gè)文本類(lèi)型的子節(jié)點(diǎn)。

這樣
<div>dvdv
    <p>p1</p>
</div>
和上面的是一樣的。

• 第三回合

<div>dvdv<p>p1</p><p>p2<span>span1</span></p></div>
子節(jié)點(diǎn)數(shù)為3 ----蒙了吧。（div元素有兩個(gè)p1和p2并列的子元素節(jié)點(diǎn)和一個(gè)本身的文本節(jié)點(diǎn)，至于p2里的span元素，它不是和p1，p2并列的元素，所以不能算是div的子節(jié)點(diǎn)，可能是孫子節(jié)點(diǎn)。而且p1節(jié)點(diǎn)的末尾標(biāo)簽后面沒(méi)有換行，p2節(jié)點(diǎn)的末尾標(biāo)簽后面也沒(méi)有換行所以是---一個(gè)div本身的文本節(jié)點(diǎn)，和兩個(gè)元素節(jié)點(diǎn)一共3個(gè)）。

****現(xiàn)在加上換行
<div>dvdv
    <p>p1</p><p>p2</p>
</div>
這樣的話節(jié)點(diǎn)數(shù)就變?yōu)榱?個(gè)啊，首先dvdv后面有個(gè)換行這個(gè)換行是不計(jì)數(shù)的，一般情況下?lián)Q行會(huì)被計(jì)為一個(gè)文本節(jié)點(diǎn)，dvdv就是一個(gè)文本節(jié)點(diǎn)所以dvdv后面的換行是不作為文本節(jié)點(diǎn)計(jì)數(shù)的。比上個(gè)例子多出來(lái)的一個(gè)節(jié)點(diǎn)就是p2便簽?zāi)┪驳哪莻€(gè)換行，記為文本節(jié)點(diǎn)。

****最后來(lái)個(gè)實(shí)戰(zhàn)
<div>
    <p>p1</p>
    <p id = 'p2'>
        <span>---span---</span>
    </p>
</div>
來(lái)看看這個(gè)div塊共有幾個(gè)子節(jié)點(diǎn)
首先div本身有個(gè)文本節(jié)點(diǎn)（不管它會(huì)不會(huì)像上面的例子那樣有顯示的dvdv文本），接著p1一個(gè)元素節(jié)點(diǎn)，p1標(biāo)簽?zāi)┪驳膿Q行是又一個(gè)文本節(jié)點(diǎn)，還有id為p2的元素節(jié)點(diǎn)，以及p2末尾的換行又是一個(gè)文本節(jié)點(diǎn)，至此div的子節(jié)點(diǎn)已經(jīng)數(shù)完了。一共5個(gè)子節(jié)點(diǎn)，至于p2內(nèi)部的span那是div的孫子節(jié)點(diǎn)了不能算在div的子節(jié)點(diǎn)里的。

• 如果標(biāo)簽的嵌套違反了嵌套規(guī)則，那么在計(jì)算子節(jié)點(diǎn)的時(shí)候可能怎么算都算不對(duì)的（：