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.childrenJohn 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 回答