为了账号安全,请及时绑定邮箱和手机立即绑定

html中所有节点和子节点的计算方式

html中所有节点和子节点的计算方式

30秒到达战场 2018-08-28 09:11:20
下面代码是在 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("*"));得到的结果是这个用红色圈上的为什么没有计算在内??这是和浏览器有关吗??还是说默认最后一个不计算在内的??
查看完整描述

1 回答

?
潇潇雨雨

TA贡献1833条经验 获得超4个赞

body的childrenNodes中含有4个元素节点,分别是:h1、p、ul和script(即使你没放在body中,还是会移到body中);除此之外,还有4个文本节点,分别在四个元素节点之前(空格或换行)。这就是输出值为8的原因。

*获取了文档中的所有节点,加载DOM树时的过程是这样的:html > head > meta > title > body > h1 > p > ul > li × 3(按照顺序) > script ,这就是输出12的原因。


查看完整回答
反对 回复 2018-10-09
  • 1 回答
  • 0 关注
  • 1014 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信