首頁猿問 document.getEleme...

document.getElementsByTagName("div")[0].childNodes的下標[0]是啥意思

JavaScript

qq_風(fēng)華青春_03784766 2016-09-07 18:44:09

<div>? javascript ?? <p>javascript</p>? <div>jQuery</div>? <h5>PHP</h5></div><script type="text/javascript">? ? ?var node=document.getElementsByTagName("div")[0].childNodes;? ? ?document.write("div子節(jié)點個數(shù)："+node.length+"<br />");?for(var i=0;i<node.length;i++){?? ? ?document.write("節(jié)點類型："+node[i].nodeType+"<br />");? ? ?}</script>請問以上代碼獲取div標簽屬性為啥要用[0]下標？謝謝！

查看完整描述

4 回答

已采納

llwanghong

TA貢獻7條經(jīng)驗獲得超9個贊

document.getElementsByTagName("div")[0].childNodes

所有類似 getElementsXXX 這種獲取節(jié)點的方法都是返回節(jié)點的數(shù)組，從名字也可以看出，所以上面就是獲取返回節(jié)點數(shù)組的第一個元素，然后得到它所有的子節(jié)點，可以和 getElementById 對比理解記憶，這個從名字可以看出，只獲得一個唯一的節(jié)點。

2 反對回復(fù) 2016-09-08

qq_風(fēng)華青春_03784766
我把代碼修改了如下： <body> <div> javascript <p>javascript</p> <div>jQuery</div> <h5>PHP</h5> </div> <ul> <li>javascript</li> <li>jQuery</li> <li>PHP</li> </ul> <script type="text/javascript"> var node=document.getElementsByTagName("div")[1].childNodes;//獲取第二個"div"標簽元素的字節(jié)點 document.write("div子節(jié)點個數(shù)："+node.length+"<br />"); for(var i=0;i<node.length;i++){ document.write("節(jié)點類型："+node[i].nodeType+"<br />"); } 運行結(jié)果是： div子節(jié)點個數(shù)：1 節(jié)點類型：3 問題：<div>jQuery</div> 標簽元素沒有子節(jié)點，怎么會有返回結(jié)果。謝謝！

回復(fù) 2016-09-08
llwanghong
nodeType為3，代表這是個文本節(jié)點(textNode)，即指的是jQuery，你理解的子節(jié)點可能緊局限于nodeType為1的元素節(jié)點(elementNode)，可以看下節(jié)點類型，包括很多種的

回復(fù) 2017-04-05
llwanghong
還有上面我說的返回節(jié)點的數(shù)組不準確，準確來說應(yīng)該是返回節(jié)點的列表，應(yīng)該這些方法返回的都是nodeList，類數(shù)組，并不是真正的數(shù)組，需要通過Array.prototype.slice.call(nodeList)來轉(zhuǎn)一下的

回復(fù) 2017-04-05