Get child element in JavaScript HTML DOM

In JavaScript HTML DOM, we can easily get the child element of a parent element using the childNodes property.

Suppose we have div element and a child div inside this just like you can see below with some ID:

<div id="parentDiv">
  <div id="childDiv"></div>
</div>

In the above HTML, the div element with ID “parentDiv” is the parent element and the div element inside it with the ID  “childDiv” is the child element of its parent div.

Now we want to get the child element of the parent div element in JavaScript.

JavaScript already has childNodes property that can return a collection of a node’s child nodes, as the NodeList JavaScript object. It can help us to do what exactly we want.

I am not going to tell you in detail about the childNodes property. Now I will just show you how to get the child element of our parent div.

To get all the child  nodes of our parent nodes (You can think it about the parent ID), below is our JavaScript code:

var parent = document.getElementById('parentDiv');
var childs = parent.childNodes;
console.log(childs); // Return collection of child node

Now suppose, we want to apply the innerHTML property to the child element. To do this, we just have to get the div element by the index number. We can see the index number of each node in the console log.

Also, read:

Below is the code where we get the child div element with its index number and apply innerHTML property with JavaScript to that child element:

var parent = document.getElementById('parentDiv');
var childs = parent.childNodes;
childs[1].innerHTML = "I am inside the child div";

Now we can see that we are able to get the child element.

We can also run a loop to get each element. Suppose, we have a parent element and there are multiple child elements just like you can see in the HTML code below:

<div id="parentDiv">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
  <div id="child5"></div>
</div>

<div id="nodenames"></div>

The element with ID “nodenames” will contain each node name. Now below is our JavaScript for loop to get each node name:

var parent = document.getElementById('parentDiv');
var childs = parent.childNodes;

  var txt = "";
  var i;

  for (i = 0; i < childs.length; i++) {
    txt = txt + childs[i].nodeName + "<br>";
  }

 document.getElementById("nodenames").innerHTML = txt;

 

Get the first child element in JavaScript HTML DOM

There is another method to get the child element which I am going to discuss now.

The HTML DOM firstElementChild property can return the first child element of a specific element that we provide. It doesn’t matter how many child elements are there, it will always return the first one.

See the example code below:

document.getElementById('parentDiv').firstElementChild.innerHTML = "I am inside the child div";

The above example will do the same task. It will apply innerHTML property to the very first child element of our HTML code which has the div with ID “childDiv”. It looks even simpler if we want to get only the first child element.

 

Leave a Reply

Your email address will not be published. Required fields are marked *