Different ways to get child Elements from Javascript and jQuery

Get Child Element from Parent

It is a common task in web development to retrieve child elements by their IDs. JavaScript and jQuery offer several approaches that can help developers choose the most suitable one for their projects. In this article, we’ll explore various techniques to retrieve child elements using JavaScript and jQuery with examples.

Get Child Element Using Javascript

1. get child element by id

a. getElementById():

This native JavaScript method retrieves an element by its ID attribute.

<div id="parent">
    <div id="child">Child Element</div>
</div>

const childElement = document.getElementById('child');

b. querySelector():

The querySelector method allows for a more flexible selection using CSS selectors, including IDs.

const childElement = document.querySelector('#child');

2. get child element by tag

a. getElementById() with getElementsByTagName():

One straightforward way to retrieve child elements by tag is by combining getElementById() and getElementsByTagName(). This method is useful when you need to find elements within a specific parent element.

const parentElement = document.getElementById("parent-id");
const childElements = parentElement.getElementsByTagName("tag-name");

b. querySelectorAll():

The querySelectorAll() method allows you to select elements using CSS selectors, including tag names. This method returns a static NodeList containing all matching elements within the specified parent element.

const childElements = document.querySelectorAll("#parent-id tag-name");
or
const childElements = document.querySelectorAll(".parent-id .tag-name");

c. Children Property:

The children property of a DOM element returns a collection of the element’s child elements. You can then iterate through this collection and filter out elements based on their tag names.

const parentElement = document.getElementById("parent-id");
const childElements = Array.from(parentElement.children).filter(child => child.tagName === "tag-name");

3. get child element by class

a. querySelectorAll() Method:

This method returns a NodeList containing all elements in the document that match the specified class name. It is versatile and allows for more complex selectors using CSS syntax.

// Selecting child elements by class using querySelectorAll()
const elements = document.querySelectorAll('.className');

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

<script>
  // Retrieving child elements with class 'child'
  const elements = document.querySelectorAll('.child');
  elements.forEach(element => {
    console.log(element.textContent);
  });
</script>

b. getElementsByClassName() Method:

This method returns a live HTMLCollection of elements with the given class name. It is faster than querySelectorAll() but has limited browser support for more complex selectors.

// Selecting child elements by class using getElementsByClassName()
const elements = document.getElementsByClassName('className');

4. get child element by type

a. querySelector():

This method is useful when you have the same class name with different element types inside the parent tag.

<div class="mainSection">
	<div class="subsec">Text1</div>
	<span class="subsec">Text2</span>
</div>

parentElement.querySelector("span.subsec");

b. querySelectorAll():

This method returns a static NodeList of all elements in the document that match a specified CSS selector(s).

// Selects all <div> elements
const elements = document.querySelectorAll('div'); 

Get Child Element Using jQuery

1. $() or jQuery():

In jQuery, the dollar sign function ($) or the jQuery() function is used to select elements by their IDs.

const childElement = $('#child');
// Or
const childElement = jQuery('#child');

2. find():

The find() method in jQuery searches for descendant elements within the selected elements. You can use it to retrieve child elements by tag name within a parent element selected using jQuery.

const childElement = $('#parent').find('#child');

const childElements = $("#parent-id").find("tag-name");

3. Children Selector:

jQuery also provides a children selector that selects all direct children of the specified parent element. By combining it with the tag selector, you can retrieve child elements by tag.

const childElements = $("#parent-id > tag-name");

// Using .children()
const children = $('.parent').children();
console.log(children); // Outputs [div, div, span]

4. context Parameter in $():

The $() function in jQuery accepts a second optional parameter called context, which specifies the context in which to search for elements. By passing the parent element as the context, you can limit the search to its descendants.

const parentElement = document.getElementById("parent-id");
const childElements = $("tag-name", parentElement);

5. Loop each child element

If children have many elements with the same class name then you can use for-each loop and get a specific node, as shown in the below example:

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // Retrieving child elements with class 'child' using jQuery
  $('.child').each(function() {
    console.log($(this).text());
  });
</script>