3 
<html>
  <head>

    <title></title>
    <script type="text/javascript"><!--
function test2() {
  var val2 = document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue;
  alert(val2);
}
--></script>

  </head>
  <body>
        <div id="ex2">Web courses - <span>http://coursesweb.net</span> - lessons, tutorials</div>
<a href="#" onclick="test2()" title="childNodes example">Test 2</a>
  </body>
</html>

以上警报http://coursesweb.net。

但是，如果我添加<p>Some text</p>并且比我尝试添加childNodes[2]它不起作用。

有人可以解释一下这个代码和ChildNode概念。

4

3 回答 3

3

跟踪document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue;我们发现的原始查询：

document.getElementById("ex2")=><div id="ex2">Web courses -<span>http://coursesweb.net</span> - lessons, tutorials</div>

因为textNode“网络课程”是第一个节点

.childNodes[1]=><span>http://coursesweb.net</span>

.childNodes[0]=> 文本节点"http://coursesweb.net"

.nodeValue=>"http://coursesweb.net"

如果要添加<p>Some text</p>原始 ex2 字符串：

<div id="ex2">Web courses - <span>http://coursesweb.net</span><p>Some text</p> - lessons, tutorials</div>

现在 document.getElementById("ex2").childNodes[2].childNodes[0].nodeValue;=>"Some text"

于 2013-11-08T15:38:21.227 回答
1

小心 childNodes，无论您使用的是 IE 8（或更低版本）还是其他浏览器，它的内容都会有所不同：

Firefox 和大多数其他浏览器会将空白或新行视为文本节点，Internet Explorer 不会

http://quirksmode.org/dom/core/#t70

这意味着如果您只是在两个节点之间添加一个空格或一个新行，在某些浏览器上，这两个节点将在 childNodes 中彼此相邻，或者将被一个空节点分隔。

在火狐中：

<div>hey</div> <p>Some text</p> // childNodes[0] : hey, childNodes[1] : some text

没有给出相同的结果

<div>hey</div>
<p>Some text</p> // childNodes[0] : hey, childNodes[1] : nothing, childNodes[2] : some text

在 Internet Explorer 中，两者都是相同的（childNodes[0] : hey, childNodes[1] : some text）

如果可以，您宁愿使用 jQuery .find() 直接挖掘给定的显式标识符。

但是如果你需要内省现有的 DOM 树，你需要处理这个烦人的事实。查看获取子节点的最佳方法

于 2013-11-08T16:08:34.877 回答
1

childNodes 属性以 NodeList 的形式返回节点的子节点的集合。

提示：您可以使用长度属性来确定子节点的数量，然后您可以遍历所有子节点并提取您想要的信息。

在这个 JavaScript 中返回“ http://coursesweb.net ”，因为 id 为 ex2 的 div 有子节点，我们得到它的值。

于 2013-11-08T15:39:05.327 回答