<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>;/span> - lessons, tutorials</div>
<a href="#" onclick="test2()" title="childNodes example">Test 2</a>
</body>
</html>
Above alerts .
But if i add <p>Some text</p> and than i try to add childNodes[2] its not working.
Can some one please explain me this code and ChildNode Concept too.
<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</span> - lessons, tutorials</div>
<a href="#" onclick="test2()" title="childNodes example">Test 2</a>
</body>
</html>
Above alerts http://coursesweb.
But if i add <p>Some text</p> and than i try to add childNodes[2] its not working.
Can some one please explain me this code and ChildNode Concept too.
3 Answers
Reset to default 3Tracing the original query document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue; we find:
document.getElementById("ex2") => <div id="ex2">Web courses -<span>http://coursesweb</span> - lessons, tutorials</div>
Because the textNode "Web courses" is the first node
.childNodes[1] => <span>http://coursesweb</span>
.childNodes[0] => textNode "http://coursesweb"
.nodeValue => "http://coursesweb"
If you want to add <p>Some text</p> make your original ex2 string:
<div id="ex2">Web courses - <span>http://coursesweb</span><p>Some text</p> - lessons, tutorials</div>
Now
document.getElementById("ex2").childNodes[2].childNodes[0].nodeValue; => "Some text"
The childNodes property returns a collection of a node's child nodes, as a NodeList.
Tip: You can use the length property to determine the number of child nodes, then you can loop through all child nodes and extract the info you want.
In this JavaScript returns "http://coursesweb" because div with id ex2 have childnodes and we get its value.
Be careful with childNodes, its content will vary whether you are on IE 8 (or less) and other browsers :
Firefox, and most other browsers, will treat empty white-spaces or new lines as text nodes, Internet Explorer will not
http://quirksmode/dom/core/#t70
It means if you just add a space or a new line between two nodes, on some browsers the two nodes will be next to each other in childNodes, or will be separated by an empty node.
In FireFox :
<div>hey</div> <p>Some text</p> // childNodes[0] : hey, childNodes[1] : some text
does not give the same result as
<div>hey</div>
<p>Some text</p> // childNodes[0] : hey, childNodes[1] : nothing, childNodes[2] : some text
In Internet Explorer, both are the same (childNodes[0] : hey, childNodes[1] : some text)
If you can, you'd rather use jQuery .find() to dig directly to a given explicit identifier.
But if you need to introspect existing DOM tree, you need to take care of this annoying fact. see best way to get child nodes