Question

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <script type="text/javascript">
        function fire() {
            console.log(document.body.children.length);
            console.log(document.body.children[0].children.length);
        }
    </script>
    <body onload="fire()">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra ipsum erat. Aenean convallis laoreet massa, et gravida purus faucibus ac. <a id="test"/>Vestibulum libero justo.</p>
        </div>
    </body>
</html>

当您打开控制台时，您会看到<a>是children <body>，<div>和<p>。 WTF？

如果使用“正确的”结束标记关闭<a>，问题就会消失，并且唯一的子项为<p>。

有人可以向我解释一下吗？

PS：在Chrome稳定版上测试过。

Answer 1

我想这是因为a不是有效的短标签。

Answer 2

根据W3C推荐：

12.2 A元素[...]开始标记：必需，结束标记：必需

无效HTML。您需要至少在<a id="test"></a>之后直接关闭代码。

来源：http://www.w3.org/TR/html401/struct/links.html

Answer 3

<a> tags需要结束标记（</a>）。

<a />无效，浏览器会尝试弄清楚你的意思，但不要指望一致行为。

Answer 4

从w3schools.com/tags/default.asp您可以看到自我结束标记：

"area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "link", "meta", "param"

A标记不应自动关闭。

Answer 5

这是html5，而不是xml。只允许void elements具有此类表示。另见8.1.2.1第6部分

为什么<a id="test"> breaks out of the DOM chain?</a>

5 个答案: