JavaScript之childNodes属性、nodeType属性学习
JavaScript之childNodes属性、nodeType属性学习
郑小超.
发布于 2018-01-24 15:03:17
发布于 2018-01-24 15:03:17
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这个属性,就意味着,我们可以对特定的节点进行处理,例如，我们可以变出一个完全只处理元素节点的函数。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-07-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读