phpstudy集成环境

 首页 > 再问关于HTML中子节点计算方式？

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

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

之前问题应该是书写结构引起的节点数量混乱，下面这个代码更正过书写时的结构样式，还是出现了空白的节点？
请问这是什么原因呢？这次我从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，问题是为什么是这些数量的子节点呢？谢谢

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

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

将会被浏览器解释为

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

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

替换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>
<div class="cc"><p>节点<p>节点</p></p></div>

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

【热门文章】
【热门文章】