在html的DOM模型中,要通过js取得某一个范围下的节点个数,节点个数=元素节点的个数+文本节点个数(元素节点标签内包含的文本)+1个空的文本节点。
<ul id="ul">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<script>
varul=document.getElementById("ul");
alert(ul.childNodes.length);//输出7,共有7个节点,其中3个元素li节点,3个元素li下面的文本节点,再加上一个元素ul的firstChild,1个空的文本节点。
</script>
上面的示例中,是有3个元素节点,元素节点的包含的内容可以通过innerHTML来获取,获取的内容分别是 “列表一”“ 列表二”“ 列表三”
4个文本节点,它们的内容可以通过文本节点的nodeValue属性,且nodeValue属性只有文本节点和属性节点才有的。
但是要获取到文本节点并不是那么简单,文本节点是包含在元素标签内的,3个li元素节点包含了3个文本节点,还有一个ul元素节点包含一个空白文本节点,虽然通过ul的childNodes能取到文本节点,但ul.childNodes[文本节点的索引].nodeValue是无法取到文本节点的值。
要取到文本节点的nodeValue,只能通过li元素节点的firstChild.nodeValue,才能取到。虽然ul的childNodes能够取到文本节点,但要取到文本节点的内容,则是要从文本节点的父节点——元素节点,该元素节点的firstChild.nodeValue才是文本节点的值。