How to Select Child Elements in JavaScript Easily

To select child elements in JavaScript, use element.children to get only element children or element.childNodes to get all child nodes including text. You can also use element.querySelector or element.querySelectorAll to select specific child elements by CSS selectors.

Syntax

element.children returns an HTMLCollection of only element children (ignores text and comments).

element.childNodes returns a NodeList of all child nodes including text and comments.

element.querySelector(selector) returns the first child element matching the CSS selector.

element.querySelectorAll(selector) returns all matching child elements as a NodeList.

javascript

const parent = document.getElementById('parent');

// Get all element children
const children = parent.children;

// Get all child nodes (elements, text, comments)
const allNodes = parent.childNodes;

// Get first child matching selector
const firstChild = parent.querySelector('.child-class');

// Get all children matching selector
const allMatchingChildren = parent.querySelectorAll('.child-class');

Example

This example shows how to select child elements inside a parent div and log their text content.

javascript

const parent = document.getElementById('parent');

// Select all element children
const children = parent.children;

for (let i = 0; i < children.length; i++) {
  console.log('Child element:', children[i].textContent.trim());
}

// Select first child with class 'special'
const specialChild = parent.querySelector('.special');
console.log('First special child:', specialChild.textContent.trim());

Output

Child element: Apple
Child element: Banana
Child element: Cherry
First special child: Banana

Common Pitfalls

• Using childNodes returns text nodes too, which can cause unexpected results if you expect only elements.
• Trying to use querySelector on the whole document instead of a specific parent may select elements outside the intended scope.
• Remember that children is a live HTMLCollection, so it updates if the DOM changes.

javascript

const parent = document.getElementById('parent');

// Wrong: childNodes includes text nodes
const nodes = parent.childNodes;
nodes.forEach(node => {
  console.log(node.nodeType); // 3 means text node
});

// Right: use children to get only elements
const elements = parent.children;
for (const el of elements) {
  console.log(el.tagName);
}

Quick Reference

Method	Description	Returns
element.children	All child elements only	HTMLCollection (live)
element.childNodes	All child nodes including text	NodeList (live)
element.querySelector(selector)	First child matching selector	Element or null
element.querySelectorAll(selector)	All children matching selector	NodeList (static)

Key Takeaways

Use element.children to get only element children, ignoring text nodes.

Use element.querySelector or querySelectorAll to select specific child elements by CSS selectors.

Avoid using childNodes if you want only elements, as it includes text and comment nodes.

Remember that children is a live collection and updates with DOM changes.

Always select child elements from a specific parent element to avoid unexpected matches.