The childNodes property returns a node's child nodes as a nodeList object. White spaces and comments are also considered as nodes. The nodes are assigned index numbers, starting from 0. Searching and sorting operations can be performed using index number on the node list.
Syntax
elementNodeReference.childNodes;Return Value: It returns a collection of child nodes of a particular node as a nodeList object (including white spaces, texts, and comments, which are considered as nodes).
Properties
1. length property: It determines the number of child nodes of the object. It is a read only property.
Syntax
elementNodeReference.childNodes.length;elementNodeReference.childNodes[index_number].length;Example 1: Showing length property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<body>
<h1><center>Geeks
</center> </h1>
<h4>Clicking on the 'Press' button will return
the length of childNodes[0].</h4>
<!--Driver Code Ends-->
<button onclick="node()">Press</button>
<p id="gfg"></p>
<script>
function node() {
// Return the length of child node.
var c = document.getElementsByTagName(
"BUTTON")[0];
var x = c.childNodes[0].length;
document.getElementById("gfg").innerHTML = x;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
2. nodeName property: It returns the name of the specified node. If the node is an element node, it will return the tag name else if the node is an attribute node, it will return the attribute name else for different node types, different names will be returned.
Syntax
elementNodeReference.childNodes[index_number].nodeName;Example 2: Showing nodeName property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<body>
<h1><center>Geeks </center> </h1>
<h4>Clicking on the 'Press' button will
return the node name of childNodes[0].</h4>
<!--Driver Code Ends-->
<button onclick="node()">Press</button>
<p id="gfg"></p>
<script>
function node() {
// Return the name of specific node name.
var c = document.getElementsByTagName(
"BUTTON")[0];
var x = c.childNodes[0].nodeName;
document.getElementById("gfg").innerHTML = x;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
3. nodeValue property: It sets or returns the node value of the specified node.
Syntax
elementNodeReference.childNodes[index_number].nodeValue;Example 3: Showing nodeValue propertyÂ
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<body>
<h1><center>Geeks </center> </h1>
<h4>Clicking on the 'Press' button will
return the node value of childNodes[0].</h4>
<!--Driver Code Ends-->
<button onclick="node()">Press</button>
<p id="gfg"></p>
<script>
function node() {
// Return the node value.
var c = document.getElementsByTagName("BUTTON")[0];
var x = c.childNodes[0].nodeValue;
document.getElementById("gfg").innerHTML = x;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- node.childNodes contains every type of child node elements, text nodes, and comment nodes. Because the list is live, it automatically updates whenever children are added or removed from the node.
- Browsers insert text nodes for whitespace in the HTML source. This means childNodes often contains unexpected empty or whitespace only text nodes between elements. For a collection that contains only element children, use element.children instead.
