这是我的代码:
<html>
<h1 id="hg">
<h2>11</h2>
<h2>22</h2>
<h2>33</h2>
</h1>
<script>
var h = document.getElementById("hg").getElementsByTagName("h2");
alert(h.length);
</script>
</html>
我已经看过了手动,似乎getElementById返回HTMLHeadingElement在这种情况下,它继承的方法getElementsByTagName从Element.我希望得到一个3值h.length,但我得到了0.它出什么问题了？
你会发现一个<h1>不能包含另一个标题(一个唯一有效的内容h1,其他标题是短语内容,它限制内容,非常简单,内嵌元素和文本),因此当浏览器构建DOM时它移动h2元件以外的h1,这防止它们被发现,通过DOM,里面的h1.
在Chrome中,您的HTML会重新组织为以下内容(我认为,在其他浏览器中也会重新排列):
<h1 id="hg"></h1>
<h2>11</h2>
<h2>22</h2>
<h2>33</h2>
为了保持有效性,DOM的这种抢救是我们应该始终努力创建有效HTML的原因:因为浏览器的自动更正是无证的且不可预测的(在HTML 5之前,我认为文档应该如何进行错误恢复) .
顺便说一下,这听起来非常类似于为<hgroup>元素呈现的用例(似乎正在从规范中删除).但是,鉴于您似乎正在展示一个内容列表,我建议将这些<h2>元素包含在一起,<ol>并以这种方式对它们进行语义分组:
<ol id="contents">
<li><h2>11</h2></li>
<li><h2>22</h2></li>
<li><h2>33</h2></li>
</ol>