再问关于HTML中子节点计算方式?

小小的PHP能干啥
  • 181

首先请管理员相信,这不是故意的重复问题,我认为是有区别的,对有疑惑的小伙伴有一定帮助的。

之前问题应该是书写结构引起的节点数量混乱,下面这个代码更正过书写时的结构样式,还是出现了空白的节点?
请问这是什么原因呢?这次我从class为cc开始就看不懂了.
附上代码

<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>

<div class="aa"><p>节点</p></div>
<hr>

<div class="bb"><p>节点</p><p>节点</p></div>
<hr>

<div class="cc"><p>节点<p>节点</p></p></div>
<hr>

<div class="dd"><p>节点<p>节点</p><p>节点</p></p></div>
<hr>

<div class="ee"><p>节点<p>节点</p><p>节点<p>节点</p></p></p></div>
<hr>

<div class="ff"><p>节点<p>节点</p><p>节点<p>节点<p>节点</p></p></p></p></div>
<hr>

<div class="gg"><p>节点<p>节点</p><p>节点<p>节点</p><p>节点</p></p></p></div>
<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);">
<input type="button" value="检测class为ee下的节点数量" onclick="jiedian('ee',4);">
<input type="button" value="检测class为ff下的节点数量" onclick="jiedian('ff',5);">
<input type="button" value="检测class为gg下的节点数量" onclick="jiedian('gg',6);">

<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>
<p>class为ee下一共有<span class="shuliang">0</span>个节点</p>
<p>class为ff下一共有<span class="shuliang">0</span>个节点</p>
<p>class为gg下一共有<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>

</body>
</html>

代码我倒是没写错,数量是1234687,问题是为什么是这些数量的子节点呢?谢谢

回复
阅读 1.9k
4 个回答

替换p标签为div标签后结构好像简洁多了!
原来是p搞乱了
附上代码

<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>

<div class="aa"><div>节点</div></div>
<hr>

<div class="bb"><div>节点</div><div>节点</div></div>
<hr>

<div class="cc"><div>节点<div>节点</div></div></div>
<hr>

<div class="dd"><div>节点<div>节点</div><div>节点</div></div></div>
<hr>

<div class="ee"><div>节点<div>节点</div><div>节点<div>节点</div></div></div></div>
<hr>

<div class="ff"><div>节点<div>节点</div><div>节点<div>节点<div>节点</div></div></div></div></div>
<hr>

<div class="gg"><div>节点<div>节点</div><div>节点<div>节点</div><div>节点</div></div></div></div>
<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);">
<input type="button" value="检测class为ee下的节点数量" onclick="jiedian('ee',4);">
<input type="button" value="检测class为ff下的节点数量" onclick="jiedian('ff',5);">
<input type="button" value="检测class为gg下的节点数量" onclick="jiedian('gg',6);">

<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>
<p>class为ee下一共有<span class="shuliang">0</span>个节点</p>
<p>class为ff下一共有<span class="shuliang">0</span>个节点</p>
<p>class为gg下一共有<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>

</body>
</html>

p标签里面禁止嵌套p标签

<div class="cc"><p>节点<p>节点</p></p></div>

这里p标签就嵌套错误了吧。。而且p标签里面嵌套p标签是不行的。

一般情况下不要把块级元素放在<p>里,除非你明确为什么要这么做。

<div class="cc"><p>节点<p>节点</p></p></div>

将会被浏览器解释为

<div class="cc"><p>节点</p><p>节点</p><p></p></div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏