Article Categories

Selected Reading

How to get the child element of a parent using JavaScript?

Javascript Web Development Object Oriented Programming

JavaScript provides several methods to access child elements of a parent element. The most common approaches include using children, childNodes, querySelector, and querySelectorAll.

Using the children Property

The children property returns a live HTMLCollection of all direct child elements, excluding text nodes and comments.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Getting Child Elements</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .child1,
   .child2,
   .child3 {
      display: none;
      margin: 10px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      color: white;
      font-weight: bold;
   }
   .child1 {
      background-color: red;
   }
   .child2 {
      background-color: pink;
      color: black;
   }
   .child3 {
      background-color: blue;
   }
   .btn {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px 5px;
   }
</style>
</head>
<body>
<h1>Get Child Elements of a Parent</h1>
<div class="parent1">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
<div class="child3">Child 3</div>
</div>
<br />
<button class="btn" onclick="showChildren()">Show All Children</button>
<button class="btn" onclick="showFirstChild()">Show First Child</button>
<button class="btn" onclick="showLastChild()">Show Last Child</button>
<button class="btn" onclick="hideAll()">Hide All</button>
<h3>Click the buttons above to see different child selection methods</h3>
<div id="output"></div>

<script>
   const parentEle = document.querySelector(".parent1");
   const output = document.getElementById("output");

   function showChildren() {
      // Get all child elements using children property
      Array.from(parentEle.children).forEach((child, index) => {
         child.style.display = "inline-block";
      });
      output.innerHTML = `<p>Found ${parentEle.children.length} child elements using parentEle.children</p>`;
   }

   function showFirstChild() {
      hideAll();
      // Get first child element
      const firstChild = parentEle.firstElementChild;
      if (firstChild) {
         firstChild.style.display = "inline-block";
         output.innerHTML = `<p>First child: ${firstChild.textContent} (class: ${firstChild.className})</p>`;
      }
   }

   function showLastChild() {
      hideAll();
      // Get last child element
      const lastChild = parentEle.lastElementChild;
      if (lastChild) {
         lastChild.style.display = "inline-block";
         output.innerHTML = `<p>Last child: ${lastChild.textContent} (class: ${lastChild.className})</p>`;
      }
   }

   function hideAll() {
      Array.from(parentEle.children).forEach(child => {
         child.style.display = "none";
      });
      output.innerHTML = "";
   }
</script>
</body>
</html>

Different Methods to Access Child Elements

Method	Returns	Description
`children`	HTMLCollection	All direct child elements (no text nodes)
`childNodes`	NodeList	All child nodes including text and comments
`firstElementChild`	Element	First child element only
`lastElementChild`	Element	Last child element only
`querySelector()`	Element	First matching child element by CSS selector
`querySelectorAll()`	NodeList	All matching child elements by CSS selector

Using querySelector for Specific Children

<!DOCTYPE html>
<html>
<head>
<title>Specific Child Selection</title>
</head>
<body>
<div id="container">
   <p class="text">First paragraph</p>
   <div class="box">Box element</div>
   <p class="text">Second paragraph</p>
   <span>Span element</span>
</div>

<script>
   const container = document.getElementById('container');
   
   // Get first paragraph child
   const firstP = container.querySelector('p');
   console.log('First paragraph:', firstP.textContent);
   
   // Get all paragraph children
   const allP = container.querySelectorAll('p');
   console.log('All paragraphs count:', allP.length);
   
   // Get child by class
   const box = container.querySelector('.box');
   console.log('Box element:', box.textContent);
   
   // Get all children with specific class
   const textElements = container.querySelectorAll('.text');
   textElements.forEach((el, index) => {
      console.log(`Text element ${index + 1}:`, el.textContent);
   });
</script>
</body>
</html>

Key Points

children returns only element nodes, while childNodes includes text nodes and comments
HTMLCollection (from children) is live - it updates automatically when DOM changes
NodeList (from querySelectorAll) is static - it doesn't update after creation
Use Array.from() to convert HTMLCollection to array for array methods
firstElementChild and lastElementChild are more reliable than firstChild/lastChild

Conclusion

The children property is the most common way to access child elements, providing a clean list of element nodes. Use querySelector methods when you need to target specific children by CSS selectors, and firstElementChild/lastElementChild for direct access to the first or last child element.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

630 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next