Question

这是我的代码：

<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。怎么了？

Answer 1

您会发现<h1>不能包含另一个标题（h1的唯一有效内容和其他标题是phrasing content，其中将内容限制为非常简单的内联元素和文本，因此当浏览器构造DOM时，它会移动h2的{{1}}元素到之外，这会阻止它们由DOM在h1内找到。

在Chrome中，您的HTML会重新组织为以下内容（并且，我推测，在其他浏览器中也会重新排列）：

h1

为了保持有效性，DOM的这种抢救是我们应该像开发人员一样始终努力创建有效的HTML的原因：因为浏览器做出的自动更正没有记录且不可预测（在HTML 5之前，我认为文件应该如何进行错误恢复）。

顺便说一下，这听起来与<hgroup>元素（似乎正在从规范中删除）的用例非常相似。但是，鉴于您似乎正在提供一份内容列表，我建议将<h1 id="hg"></h1> <h2>11</h2> <h2>22</h2> <h2>33</h2>元素括在<h2>中，并按照这种方式对其进行语义分组：

<ol>

Answer 2

您需要将html更改为此示例：

<div id="hg">
    <h2>11</h2>
    <h2>22</h2>
    <h2>33</h2>
</div>

DEMO

为什么我的getElementsByTagName返回一个空的NodeList？

2 个答案: