JavaScript - Object Node - The childNodes property

Submitted by Mi-K on Wednesday, September 14, 2011 - 8:06am

The childNodes property allows us to select an element of a node.

For example, we want to retrieve all values of HTML <li> tags inside a <ul> one.

So, let's try it:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div id="theDiv">
    <ul id="myUl">
        <li id="li0">Hello,</li>
        <li id="li1">welcome</li>
        <li id="li2">on</li>
        <li id="li2">BadproG.com</li>
    </ul>
</div>

<script type="text/javascript">

var myElement;
var i;

i = 1;
myElement = document.getElementById('theDiv');

while (i < (myElement.childNodes[1].childElementCount * 2)) {
    document.write(myElement.childNodes[1].childNodes[i].innerHTML + ' ');
    i += 2;
}

</script>

</body>
</html>

The result displays all texts of each <li> inside the <ul> HTML tag:

Hello, welcome on BadproG.com

As you can see there is a specific technique to retrieve these data.
Indeed, you can not see a text of a <li> with an even number.
You have to use odd ones.