这是我的代码:
<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 元素。我希望得到 3 作为 h.length 的值，但我得到的是 0。有什么问题吗？
最佳答案
你会发现 <h1> 不能包含 another 标题(h1 和其他标题的唯一有效内容是 phrasing content ，它非常简单地将内容限制为内联元素和文本)，因此当浏览器构造它移动的 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>
关于javascript - 为什么我的 getElementsByTagName 返回一个空的 NodeList？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20163949/