为什么 DOM 子属性对于空和非空 HTML 元素的行为不同？

Question

假设我有一个包含以下代码的 HTML 文件：

<foo>
    <bar id="bar1"></bar>
    <bar id="bar2"></bar>
    <bar id="bar3"></bar>
</foo>

<script>
    const foo = document.getElementsByTagName("foo")[0];
    const bars = foo.children;
    for (i = 0; i < bars.length; i++) {
        console.log(bars[0]);
    }
</script>

在浏览器（在我的例子中是 Chrome）中运行它会导致在控制台上打印三个 bar 节点，这是预期的行为。

但是，当我将 bar 节点的符号缩短如下

<foo>
    <bar id="bar1" />
    <bar id="bar2" />
    <bar id="bar3" />
</foo>

打印的节点数变成只有一个。似乎bar2 是bar1 的孩子，bar3 是bar2 的孩子。

HTML DOM 处理空元素的方式不同吗？

Answer 1

/> 符号在 HTML 中没有任何意义。它只在 XML 中有意义。

就 HTML DOM 而言，在您的第二个示例中，您有三个 bar 元素（我可以添加无法识别），它们相互嵌套，缺少结束标签，使其等同于以下内容：

<foo>
    <bar id="bar1">
        <bar id="bar2">
            <bar id="bar3"></bar>
        </bar>
    </bar>
</foo>

换句话说，在第二个示例中实际上并没有空元素（#bar3 除外）——因为/> 在 HTML 中没有意义，它不像在XML。