html结构 - 再问关于HTML中子节点计算方式？
本文介绍了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标签后结构好像简洁多了！
原来是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>这篇关于html结构 - 再问关于HTML中子节点计算方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
