How to find child element of parent with JavaScript

In JavaScript, there are multiple approaches to locate child elements of a parent element. Here, I will introduce several commonly used methods along with corresponding code examples.

1. Using the children Property

The children property returns a collection of the element's direct child elements, which are exclusively element nodes (excluding text nodes and comment nodes). This is a straightforward method for finding direct child elements.

javascript
var parentElement = document.getElementById('parent');
var childElements = parentElement.children;
console.log(childElements); // Log all direct child elements

2. Using querySelector and querySelectorAll

These methods enable searching for child elements using CSS selectors. querySelector returns the first matching element, while querySelectorAll returns a NodeList containing all matching elements.

javascript
var parentElement = document.getElementById('parent');

// Find the first child element
var firstChild = parentElement.querySelector('div');
console.log(firstChild);

// Find all div-type child elements
var allDivChildren = parentElement.querySelectorAll('div');
console.log(allDivChildren);

3. Using the childNodes Property

The childNodes property returns a NodeList containing all child nodes, including element nodes, text nodes, and comment nodes. If only element nodes are required, filtering the results is necessary.

javascript
var parentElement = document.getElementById('parent');
var childNodes = parentElement.childNodes;

// Filter out element nodes
var elementChildren = Array.prototype.filter.call(childNodes, function(node) {
  return node.nodeType === Node.ELEMENT_NODE;
});

console.log(elementChildren); // Log only element nodes

Example Use Case

Suppose we have an HTML structure with a parent element containing several child elements:

html
<div id="parent">
  <div>Child element 1</div>
  <p>Child element 2</p>
  <span>Child element 3</span>
</div>

To retrieve all div-type child elements of this parent element, use querySelectorAll:

javascript
var parentElement = document.getElementById('parent');
var divChildren = parentElement.querySelectorAll('div');
console.log(divChildren); // Outputs a NodeList containing Child element 1

These methods can be flexibly selected based on specific requirements and scenarios to address various development needs.