How to Get the Child Element of a Parent Using JavaScript?

To get a child element of a parent element in JavaScript, you can use several DOM (Document Object Model) methods, such as children, childNodes, querySelector(), or getElementById(). Here are different ways to access child elements based on the situation.

1. Using children property

The children property returns a live HTMLCollection of all child elements of a specified parent element. This property only returns elements (not text nodes, comments, etc.).

Output

In this example

• A parent div contains a child div.
• When the button is clicked, the GFG_Fun() function is triggered.
• It selects the first child of the parent using parent.children[0] and displays its text in the <h1> element.

2. using querySelector Method

The querySelector() method returns the first element within the parent that matches a given CSS selector. This is useful if you need to access a specific child element based on a class, ID, or other attributes.

Output:

3. Using childNodes Property

The childNodes property returns a NodeList of all child nodes of a specified parent, including elements, text nodes, and comments. This means it includes everything inside the parent element, not just the HTML elements.

In this example

• childNodes returns all child nodes of an element, including text nodes (spaces, line breaks) and element nodes (like <div>).
• parent.childNodes gives a list of all child nodes. Index 0 and 2 are text nodes (spaces). Index 1 and 3 are element nodes (child1, child2).
• We access the element nodes with children[1] and children[3] and display their text using innerHTML.

4. Using querySelectorAll() for All Matching Children

querySelectorAll() works similarly to querySelector(), but instead of returning just the first match, it returns all matching child elements as a NodeList.

In this example

• querySelectorAll(): Selects all elements matching the given CSS selector (in this case, .child).
• parent.querySelectorAll('.child') selects all child elements with the class .child inside the #parent div.
• .forEach() loops through all selected child elements and displays their content in the result section.

5. Using firstElementChild and lastElementChild

FirstElementChild and lastElementChild are properties used to access the first and last element child nodes of an HTML element. These properties are particularly useful when we need to quickly access the first or last child element, ignoring any non-element child nodes (like text or comment nodes).

In this example

• firstElementChild: Gets the first element child of the parent. Ignores text or comment nodes.
• lastElementChild: Gets the last element child of the parent. Ignores text or comment nodes.