Get all parent element javascript

View Discussion

Table of Contents Show

How do I get parent node?
How do you find the parent element of a class?
What is parentNode in JavaScript?
What is the difference between parentNode and parentElement?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

In this article, we will learn to get the child element of the parent using Javascript. Given an HTML document and the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript. For this, there are 2 ways to get the child element:

By using the children property
By using querySelector Method

We will discuss both approaches & understand their implementation through the examples.

The DOM children property is used to return HTMLcollection of all the child elements of the specified element.

Approach 1:

Select an element whose child element is going to be selected.
Use .children property to get access of all the children of the element.
Select the particular child based on the index.

Example 1: This example implements the .children property to get the HTMLcollection of all the child elements of the specified element.

HTML

<!DOCTYPE HTML>

<html>

<head>

<title>Finding child element of parent with pure JavaScript.</title>

<style>

.parent {

background: green;

color: white;

}

.child {

background: blue;

color: white;

margin: 10px;

}

</style>

</head>

<body style="text-align:center;">

<h2 style="color:green;">

GeeksforGeeks

</h2>

<p id="GFG_UP" style="font-size: 15px; font-weight: bold;"></p>

<div class="parent" id="parent"> Parent

<div class="child"> Child </div>

</div>

<br>

<button onclick="GFG_Fun()"> click here </button>

<p id="GFG_DOWN"

style="font-size: 24px;

font-weight: bold;

color: green;">

</p>

<script>

var up = document.getElementById('GFG_UP');

var down = document.getElementById('GFG_DOWN');

up.innerHTML = "Click on the button select the child node.";

function GFG_Fun() {

parent = document.getElementById('parent');

children = parent.children[0];

down.innerHTML = "Text of child node is - '"

+ children.innerHTML

+ "'";

}

</script>

</body>

</html>

Output:

class Property

The querySelector() method in HTML is used to return the first element that matches a specified CSS selector(s) in the document.

Approach 2:

Select the parent element whose child element is going to be selected.
Use .querySelector() method on parent.
Use the className of the child to select that particular child.

Example 1: This example implements the .querySelector() method to get the first element to match for the specified CSS selector(s) in the document.

HTML

<!DOCTYPE HTML>

<html>

<head>

<title>How to get the child element of a parent using JavaScript ?</title>

<style>

.parent {

background: green;

color: white;

}

.child1 {

background: blue;

color: white;

margin: 10px;

}

.child2 {

background: red;

color: white;

margin: 10px;

}

</style>

</head>

<body style="text-align:center;">

<h2 style="color:green;">

GeeksforGeeks

</h2>

<p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p>

<div class="parent" id="parent"> Parent

<div class="child child1"> Child1 </div>

<div class="child child2"> Child2 </div>

</div>

<br>

<button onclick="GFG_Fun()"> click here </button>

<p id="GFG_DOWN"

style="font-size: 24px;

font-weight: bold;

color: green;">

</p>

<script>

var up = document.getElementById('GFG_UP');

var down = document.getElementById('GFG_DOWN');

up.innerHTML = "Click on the button select the child node.";

function GFG_Fun() {

parent = document.getElementById('parent');

children = parent.querySelectorAll('.child');

down.innerHTML = "Text of child node is - '"

+ children[0].innerHTML

+ "' and '"

+ children[1].innerHTML

+ "'";

}

</script>

</body>

</html>

Output:

.querySelector() Method

How do I get parent node?

To get the parent node of an HTML element, you can use the parentNode property. This property returns the parent node of the specified element as a Node object. The parentNode property is read-only, which means you can not modify it. In HTML, the document is itself the parent node of html element.

How do you find the parent element of a class?

Use the closest() method to get the closest parent element by class, e.g. child. closest('. parent') . The closest() method traverses the Element and its parents until it finds a node that matches the provided selector.

What is parentNode in JavaScript?

The read-only parentNode property of the Node interface returns the parent of the specified node in the DOM tree. Document and DocumentFragment nodes can never have a parent, so parentNode will always return null . It also returns null if the node has just been created and is not yet attached to the tree.

What is the difference between parentNode and parentElement?

Parent Element returns null if the parent is not an element node, that is the main difference between parentElement and parentNode. In many cases one can use anyone of them, in most cases, they are the same.