How ChildNode Works

Question

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

Above alerts http://coursesweb.net.

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.

score 3 · Accepted Answer · answered Nov 08 '13 at 15:38

3

Tracing the original query document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue; we find:

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

Because the textNode "Web courses" is the first node

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

.childNodes[0] => textNode "http://coursesweb.net"

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

If you want to add <p>Some text</p> make your original ex2 string:

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

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

answered Nov 08 '13 at 15:38

megawac

10,953
5
40
61

I tried ssomething like followingvar val2 = document.getElementById("ex2").childNodes[3].childNodes[0].nodeValue; alert(val2); result i got Web courses - http://coursesweb.net Hi How R U? - lessons, tutorials- Test 2 – Swati kothari Nov 08 '13 at 15:58
@Swatikothari I don't see the example youre referring to can you link it to me – megawac Nov 08 '13 at 16:03
childNodes[3] is workimng , but childNodes[2] is not giving result – Swati kothari Nov 08 '13 at 16:07
Web courses - http://coursesweb.net Result Hi How R U? - lessons, tutorials- Test 2 by pressing test2 alerts Hi How r u? – Swati kothari Nov 08 '13 at 16:08
@Swatikothari http://jsfiddle.net/YY6Ug/ I set up some alerts for retrieving various elements in your html string – megawac Nov 08 '13 at 16:10
This means If i want to display all values one by one than i have to use loop – Swati kothari Nov 08 '13 at 16:54
Its working fine with jsfiddle but in IE, Fire Fox, Opera, and in chrome its not giving alert it displaiyng correct result – Swati kothari Nov 08 '13 at 17:06
@Swatikothari Explain it works for me in ff25 and chrome30 + ie9 – megawac Nov 08 '13 at 17:09

score 1 · Answer 2 · answered Nov 08 '13 at 15:39

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.net" because div with id ex2 have childnodes and we get its value.

score 1 · Answer 3 · edited May 23 '17 at 10:24

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

How ChildNode Works

3 Answers3