我的问题是class为dd下的节点数量为什么是6个，而不是7个？
附上代码
2
689<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<p class="aa">
我是文字1
<p>节点</p>
</p>
<hr>
<p class="bb">
我是文字2
<p>节点</p>
<p>节点</p>
</p>
<hr>
<p class="cc">
我是文字3
<p>节点<p>节点</p></p>
</p>
<hr>
<p class="dd">
我是文字4
<p>节点<p>节点</p><p>节点</p></p>
</p>
<hr>
<input type="button" value="检测class为aa下的节点数量" onclick="jiedian('aa',0);">
<input type="button" value="检测class为bb下的节点数量" onclick="jiedian('bb',1);">
<input type="button" value="检测class为cc下的节点数量" onclick="jiedian('cc',2);">
<input type="button" value="检测class为dd下的节点数量" onclick="jiedian('dd',3);">
<p>class为aa下一共有<span class="shuliang">0</span>个节点</p>
<p>class为bb下一共有<span class="shuliang">0</span>个节点</p>
<p>class为cc下一共有<span class="shuliang">0</span>个节点</p>
<p>class为dd下一共有<span class="shuliang">0</span>个节点</p>
<script>
function jiedian($bianhao, $no) {
var bianhao = document.getElementsByClassName($bianhao);
var shuliang = document.getElementsByClassName("shuliang");
shuliang[$no].innerHTML = bianhao[0].childNodes.length;
}
</script>
<!--前3个我能数清楚是几个-->
<!--为什么class为dd下是6个节点？-->
</body>
</html>谢谢。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
p元素无法嵌套其他p元素（The P element represents a paragraph. It cannot contain block-level elements (including P itself).）所以 dd 实际产生的结构与问题里贴出的不同，而是会被浏览器更改为：
所以 6 个元素如下：
但问题的 html 宽松一点评价的话也不算错，因为
p的开始标记是必须的，但结束标记某些情况下可以省略。MDN HTML element reference <p>
快把块级元素列完了。。。
但最后一个由结束标记补全出来的
<p></p>如果我没看漏的话，标准里似乎就没提到了。就是说看浏览器心情，它决定怎么处理这个意外的结束标记就怎么处理。所以在某种浏览器里，说不定楼主这段代码真能输出 7 。。。从上到下依次包含如下六个子节点：
一个文本节点："↵ 我是文字4↵ "
三个元素节点：<p>节点</p>
一个元素节点：<p></p>
一个文本节点："↵ "
//↵代指换行符