0

我设置了一些简单的 HTML 和 JS 代码，以便更好地处理遍历 DOM。

这是我的 HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
  </head>
  <body>
    <div>
      <h1 id="title">Sandbox</h1>
      <button id="clickMe" onclick="playingAroundWithNodes()">Play with nodes!</button>
    </div>
  </body>
  <script type="text/javascript" src="Sandbox3.js"></script>
</html>

这是我的 JavaScript：

function playingAroundWithNodes() {

    //Getting a reference to some nodes!

    var theHtmlNode = document.childNodes[1];
    var theHeadNode = theHtmlNode.childNodes[0];
    var theBodyNode = theHtmlNode.childNodes[1];

    //Let's check out those nodes!

    console.log("theHtmlNode is a " + theHtmlNode.nodeName + " type node.");
    console.log("theHeadNode is a " + theHeadNode.nodeName + " type node.");
    console.log("theBodyNode is a " + theBodyNode.nodeName + " type node.");

}

这是我得到的控制台日志：

theHtmlNode is a HTML type node.
theHeadNode is a HEAD type node. 
theBodyNode is a #text type node.

是什么赋予了？那个文本节点到底在哪里，那不是标题节点吗？我很困惑并且已经玩了一堆（并且发现根据js，body节点实际上是HEAD的第三个孩子，但是查看对我来说没有意义的HTML）。我可以看到它是第三个后代或其他东西，但我认为孩子意味着直接孩子......任何帮助表示赞赏！

4

3 回答 3

2

首先，你认为我有新意。我根本没有意识到document有一个childNodes属性（通常根元素（html）是通过访问的document.documentElement）。

至于文本节点，这些将取决于您如何格式化 HTML 文件。上面出现的文本节点可能是一个返回字符或在 close</head>和 opening之间的几个空格<body>。

您可能正在寻找的是 (最初是非标准的，但现在最近提出了标准化) element.children。John Resig 有一个很好的概述。

因此，如果您按如下方式修改上述代码，您将得到您所期望的：

var theHeadNode = theHtmlNode.children[0];
var theBodyNode = theHtmlNode.children[1];
于 2012-12-18T20:48:21.147 回答
1

IE 是唯一一个行为与您预期一样的浏览器。所有其他浏览器都实现了该标准，并且该标准规定空格也必须是 DOM 的一部分。

因此，对于看起来像这样的 HTML：

<html>
    <body>
        <div>Hello</div>
    </body>
</html>

IE 将创建这个 DOM：

html +
     |____ body +
                |____ div +
                          |____ text("Hello")

但是所有其他浏览器都会创建这个 DOM

html +
     |____ text("\n    ")
     |
     |____ body +
     |          |____ text("\n        ")
     |          |
     |          |____ div +
     |          |         |____ text("Hello")
     |          |
     |          |____ text("\n        ")
     |
     |____ text("\n    ")

我不确定你是如何得到结果的，因为之前和之后应该有文本节点<html>。

无论如何，答案是因为标准要求它。所以不要盲目地使用硬编码索引来遍历 childNode，因为像 minifiers 这样的东西可能会因为空白而改变 DOM。循环遍历所有子节点并在找到所需节点后停止，或使用 getElementsByTagName。

于 2012-12-18T21:06:16.673 回答
0

@mcabrams：除了@slebatman 提到的，如果你想直接访问正文名称，只需使用：

var bodyNode = document.body;  //it returns a refrence to the body node

希望有帮助。

于 2012-12-19T05:20:17.727 回答