Sometimes, we want to loop over the child divs of a div and get the ids of the child divs with JavaScript.

In this article, we’ll look at how to loop over the child divs of a div and get the ids of the child divs with JavaScript.

How to loop over the child divs of a div and get the ids of the child divs with JavaScript?

To loop over the child divs of a div and get the ids of the child divs with JavaScript, we can use some DOM methods and the spread operator.

For instance, we write:

<div id="test">
  <div id="test-1"></div>
  <div id="test-2"></div>
  <div id="test-3"></div>
  <div id="test-4"></div>
</div>

to add a div with divs.

Then we write:

const childDivs = document.getElementById('test').getElementsByTagName('div');
const ids = [...childDivs].map(d => d.id)
console.log(ids)

to select all the child divs in the div with ID test with document.getElementById('test').getElementsByTagName('div').

Then we spread the returned node list into an array and call map with a callback to return the id attribute value from each div.

Therefore, ids is ["test-1", "test-2", "test-3", "test-4"].

Conclusion

To loop over the child divs of a div and get the ids of the child divs with JavaScript, we can use some DOM methods and the spread operator.