html中所有节点和子节点的计算方式
下面代码是在 chrome 浏览器中执行的
<!doctype html><html lang="en"><head>
<meta charset="UTF-8">
<title>Shopping list</title></head><body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul></body><script>
var body_element = document.getElementsByTagName("body")[0]; var htl_element = document.getElementsByTagName("*");
alert(body_element.childNodes.length); //8个
alert(htl_element.length); //12个</script></html>浏览器显示，为什么文档中所有节点数为 12 个； body的子节点数为 8 个？？？？
我计算的文档中所有节点数为 11 个；body的子节点数为 6 个。
最后用console.log(document.getElementsByTagName("*"));得到的结果是
这个用红色圈上的为什么没有计算在内？？这是和浏览器有关吗？？还是说默认最后一个不计算在内的？？
30秒到达战场浏览 1065回答 1
1回答
-
潇潇雨雨
body的childrenNodes中含有4个元素节点，分别是：h1、p、ul和script(即使你没放在body中，还是会移到body中)；除此之外，还有4个文本节点，分别在四个元素节点之前(空格或换行)。这就是输出值为8的原因。*获取了文档中的所有节点，加载DOM树时的过程是这样的：html > head > meta > title > body > h1 > p > ul > li × 3(按照顺序) > script ，这就是输出12的原因。
随时随地看视频慕课网APP
相关分类
JavaScript