javascript
JavaScript之childNodes属性、nodeType属性学习
1.childNodes屬性:在一顆節點樹上,childNodes屬性可以用來獲取任何一個元素的所有元素,它是一個包含這個元素所有子元素的數組。
<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>標簽下所有的子元素數量；
那2么為什么是3呢,下面我要用到另一個屬性nodeType屬性來解釋為什么會是3！
2.nodeType屬性總共有12種可取值,但其中僅有三種具有實用價值。
(1)元素節點的nodeType屬性值是1.
(2)屬性節點的nodeType屬性值是2.
(3)文本節點的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下第一個子節點是文本節點；
<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下第二個子節點是元素節點(<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下第三個子節點還是文本節點；
觀察上面結論得出：html標簽如<a></a>等都是元素節點、標簽里面的文本內容都是文本節點、標簽里面的屬性如title,href都是屬性節點。
?
注意:html標簽之間的空格會被解釋稱文本節點；
做個測試->看如下代碼:
<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個子節點,第一個是:元素節點,第二個是<script></script>間的文本節點；
注意:文本節點的個數不是按照空格的個數,或者是文字的個數來計算的。
會了nodeType這個屬性,就意味著,我們可以對特定的節點進行處理,例如，我們可以變出一個完全只處理元素節點的函數。
?
轉載于:https://www.cnblogs.com/GreenLeaves/p/5692576.html
總結
以上是生活随笔為你收集整理的JavaScript之childNodes属性、nodeType属性学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： shell--printf
- 下一篇： gradle idea java ssm