Question

我正在为遍历执行一些简单的JS测试，我想知道为什么我的documentElement包含一个空对象？

<html>
    <head>
        <title>My document</title>
    </head>
    <body>
        <h1>Some header</h1>
        <p id="pID">Some paragraph</p>
        <p name="pNAME">Another paragraph/p>
    </body>
</html>
<script type="text/javascript">
    var rootElement = document.documentElement;
    var childNodes = rootElement.childNodes;

    for (var i = 0; i < childNodes.length; i++) {
      document.write(childNodes[i].localName);
      document.write("<br>");
    }
</script>

返回head, null, body。但为什么childNodes中有3 rootElement？

Answer 1

如果只列出对象而不是localName，则会看到：

[object HTMLHeadElement]
[object Text]
[object HTMLBodyElement]

因此，您收到null文本节点的localName。要解决此问题，您需要children而不是childNodes：

<script type="text/javascript">
    var rootElement = document.documentElement;
    var childNodes = rootElement.children;

    for (var i = 0; i < childNodes.length; i++) {
      document.write(childNodes[i]);
      document.write("<br>");
    }
</script>

以下是JSFiddle中的演示。

Answer 2

</head>和<body>之间的新行被视为文字（[object Text]），因此.localName属性为null。

如果你试试这个，它应该只输出2个元素

    <html>
    <head>
        <title>My document</title>
    </head><body>
        <h1>Some header</h1>
        <p id="pID">Some paragraph</p>
        <p name="pNAME">Another paragraph</p>
    </body>
</html>

    <script type="text/javascript">
        var rootElement = document.documentElement;
        var childNodes = rootElement.childNodes;

        for (var i = 0; i < childNodes.length; i++) {
          document.write(childNodes[i].localName);
          document.write("<br>");
        }
    </script>

documentElement的childNodes返回一个null

2 个答案: