<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 概念吗?

最佳答案

跟踪原始查询 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“Web类(class)”是第一个节点
.childNodes[1] => <span>http://coursesweb.net</span>.childNodes[0] => textNode "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"

关于javascript - 子节点如何工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19862693/

10-12 16:36