javascript
JavaScript之childNodes属性、nodeType属性学习
1.childNodes屬性:在一顆節(jié)點樹上,childNodes屬性可以用來獲取任何一個元素的所有元素,它是一個包含這個元素所有子元素的數(shù)組。
<body><script type="text/javascript">function countBodyChildren() {var allelements = document.getElementsByTagName("body");alert(allelements[0].childNodes.length);}window.onload = countBodyChildren; </script></body>輸出：3；這句代碼的意思是輸出<body></body>標簽下所有的子元素數(shù)量；
那2么為什么是3呢,下面我要用到另一個屬性nodeType屬性來解釋為什么會是3！
2.nodeType屬性總共有12種可取值,但其中僅有三種具有實用價值。
(1)元素節(jié)點的nodeType屬性值是1.
(2)屬性節(jié)點的nodeType屬性值是2.
(3)文本節(jié)點的nodeType屬性值是3.
<body><script type="text/javascript">function countBodyChildren() {var childelements = document.getElementsByTagName("body")[0];alert(childelements.childNodes[0].nodeType);}window.onload = countBodyChildren;</script> </body>輸出：3.說明body下第一個子節(jié)點是文本節(jié)點；
<body><script type="text/javascript">function countBodyChildren() {var childelements = document.getElementsByTagName("body")[0];alert(childelements.childNodes[1].nodeType);}window.onload = countBodyChildren;</script> </body>輸出：1.說明body下第二個子節(jié)點是元素節(jié)點(<script></script>)；
<body><script type="text/javascript">function countBodyChildren() {var childelements = document.getElementsByTagName("body")[0];alert(childelements.childNodes[2].nodeType);}window.onload = countBodyChildren;</script> </body>輸出：3.說明body下第三個子節(jié)點還是文本節(jié)點；
觀察上面結論得出：html標簽如<a></a>等都是元素節(jié)點、標簽里面的文本內(nèi)容都是文本節(jié)點、標簽里面的屬性如title,href都是屬性節(jié)點。
?
注意:html標簽之間的空格會被解釋稱文本節(jié)點；
做個測試->看如下代碼:
<body><script type="text/javascript">function countBodyChildren(){var childelements = document.getElementsByTagName("body")[0];alert(childelements.childNodes[2].nodeType);}window.onload = countBodyChildren;</script></body>這段代碼會報錯:因為這種代碼排版下,body下只有2個子節(jié)點,第一個是:元素節(jié)點,第二個是<script></script>間的文本節(jié)點；
注意:文本節(jié)點的個數(shù)不是按照空格的個數(shù),或者是文字的個數(shù)來計算的。
會了nodeType這個屬性,就意味著,我們可以對特定的節(jié)點進行處理,例如，我們可以變出一個完全只處理元素節(jié)點的函數(shù)。
?
轉(zhuǎn)載于:https://www.cnblogs.com/GreenLeaves/p/5692576.html
總結
以上是生活随笔為你收集整理的JavaScript之childNodes属性、nodeType属性学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： shell--printf
- 下一篇： 每天CookBook之JavaScrip