javascript - html中所有节点和子节点的计算方式
本文介绍了javascript - 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("*"));得到的结果是
这个用红色圈上的为什么没有计算在内？？这是和浏览器有关吗？？还是说默认最后一个不计算在内的？？
解决方案
body的childrenNodes中含有4个元素节点，分别是：h1、p、ul和script(即使你没放在body中，还是会移到body中)；除此之外，还有4个文本节点，分别在四个元素节点之前(空格或换行)。这就是输出值为8的原因。
*获取了文档中的所有节点，加载DOM树时的过程是这样的：html > head > meta > title > body > h1 > p > ul > li × 3(按照顺序) > script ，这就是输出12的原因。
这篇关于javascript - html中所有节点和子节点的计算方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
