<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/