訪問(wèn)選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表,返回的值可以看作是一個(gè)數(shù)組,他具有l(wèi)ength屬性。
語(yǔ)法:
elementNode.childNodes
注意:
如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn),則該屬性返回不包含節(jié)點(diǎn)的 NodeList。
我們來(lái)看看下面的代碼:
運(yùn)行結(jié)果:
IE:
UL子節(jié)點(diǎn)個(gè)數(shù):3 節(jié)點(diǎn)類型:1
其它瀏覽器:
UL子節(jié)點(diǎn)個(gè)數(shù):7 節(jié)點(diǎn)類型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問(wèn)題
2. 節(jié)點(diǎn)之間的空白符,在firefox、chrome、opera、safari瀏覽器是文本節(jié)點(diǎn),所以IE是3,其它瀏覽器是7,如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運(yùn)行結(jié)果:(IE和其它瀏覽器結(jié)果是一樣的)
UL子節(jié)點(diǎn)個(gè)數(shù):3 節(jié)點(diǎn)類型:1
試一試,在script標(biāo)簽內(nèi),獲取子節(jié)點(diǎn),并輸出相應(yīng)屬性。
1. 獲取第一個(gè)DIV的子節(jié)點(diǎn)。
2. 使用for遍歷每個(gè)節(jié)點(diǎn)。
3. 輸出相應(yīng)節(jié)點(diǎn)的屬性。
注意: 輸出內(nèi)容可能和想的內(nèi)容不同,想想為什么。
1. 使用getElementsByTagName與childNodes
2. 因?yàn)楂@取的孩子節(jié)點(diǎn)是一個(gè)數(shù)組,所以使用for循環(huán)。
3. 輸出節(jié)點(diǎn)屬性,nodeName、nodeType、nodeValue。
var x=document.getElementsByTagName("div")[0].childNodes;
for(i=0;i<x.length;i++){
document.write("節(jié)點(diǎn)類型:"+x[i].nodeName+x[i].nodeType+x[i].nodeValue+"<br>");}
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)