关于HTML中的节点数量计算方式?

小小的PHP能干啥
  • 181

我的问题是class为dd下的节点数量为什么是6个,而不是7个?
附上代码

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

<div class="aa">
    我是文字1
    <p>节点</p>
</div>
<hr>

<div class="bb">
    我是文字2
    <p>节点</p>
    <p>节点</p>
</div>
<hr>

<div class="cc">
    我是文字3
    <p>节点<p>节点</p></p>
</div>
<hr>

<div class="dd">
    我是文字4
    <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);">

<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>

谢谢。

回复
阅读 2.5k
2 个回答
✓ 已被采纳

p 元素无法嵌套其他 p 元素(The P element represents a paragraph. It cannot contain block-level elements (including P itself).

所以 dd 实际产生的结构与问题里贴出的不同,而是会被浏览器更改为:

<div class="dd">
    我是文字4
    <p>节点</p><p>节点</p><p>节点</p><p></p>
</div>

所以 6 个元素如下:
图片描述

但问题的 html 宽松一点评价的话也不算错,因为 p 的开始标记是必须的,但结束标记某些情况下可以省略。

The start tag is mandatory. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.

MDN HTML element reference <p>

快把块级元素列完了。。。

但最后一个由结束标记补全出来的 <p></p> 如果我没看漏的话,标准里似乎就没提到了。就是说看浏览器心情,它决定怎么处理这个意外的结束标记就怎么处理。所以在某种浏览器里,说不定楼主这段代码真能输出 7 。。。

从上到下依次包含如下六个子节点:
一个文本节点:"↵ 我是文字4↵ "
三个元素节点:<p>节点</p>
一个元素节点:<p></p>
一个文本节点:"↵ "

//↵代指换行符

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏