Tag names of body element's children in JavaScript?

Front End Technology Javascript Web Development

A property of an element called "children" delivers all child elements of the element as objects. We will learn how to use Javascript to obtain the child element of the parent in this tutorial. The challenge is to use JavaScript to choose a certain element in an HTML document and retrieve all of the parent element's children. There are 2 methods for doing this to obtain the child element −

making use of the children property
making use of the querySelector Method

Through the use of examples, we will discuss both strategies and understand how they are applied.

The HTMLcollection of every child element of the provided element is returned via the DOM children property.

Method 1

Choose an element whose child element will be chosen.
To access each of the element's children, use the.children property.
Based on the index, choose the specific child.

children property

When a specific element's child elements are requested, the DOM children property returns an HTMLcollection of them all. Index numbers allow access to the collection's elements. ChildNodes contains all nodes, including text and comment nodes, whereas Children only contains element nodes. This is where ChildNodes varies from Children. This property can be read only.

Syntax

element.children

Return Value

It gives back a set of element nodes that can be found by indexing.

Example 1

In order to retrieve the HTMLcollection of every child element of the given element, this example implements the.children property.


<!DOCTYPE html>
<html>
<title>Tag names of body element's children in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <p>The count of div id "divCount" is</p>
   <div id="result"></div>
   <div id="divCount">
      <p>This is first div element</p>
      <p>This is second div element</p>
      <p>This is third div element</p>
   </div>
   <script>
      let count = document.getElementById("divCount").children.length;
      document.getElementById("result").innerHTML = count;
   </script>
</body>
</html>

Method 2

The first element with in document which matches a given CSS selector or selectors is returned by the querySelector() method in HTML.

In order to choose a child element, you must first select the element's parent.
Use the parent's .querySelector() method.
Select a specific child by using the className of that child.

querySelector Method

The first element that matches the given selectors is the only one that the querySelector() function delivers. Use the querySelectorAll() function to retrieve every match.

The necessary field is selectors. It designates a CSS selector or selectors to match the element. Based on their IDs, classes, kinds, etc., these selectors are used to choose HTML elements. If there are numerous selectors, commas will be used to separate them.

The element that is returned is the one that appears first in the document. The first matched element is returned if the selector matches an id that appears more than once in the content (that should be unique on each page).

Syntax

element.querySelector(selectors);

Return Value

When a specified CSS selector or selectors are present in the document, this method is used to deliver the first element that matches them.

Example 1

In this example let us understand how the "div" element, changes the first "p" element's text to understand −


<!DOCTYPE html>
<html>
<title>Tag names of body element's children in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <div id="divCount">
      <p>This is your "p" element in div.</p>
      <h4>This is your "h4" element in div.</h4>
   </div>
   <p>To modify the text of the first p element in div, click the button.</p>
   <button onclick="myFun()">Click Here</button>
   <script>
      function myFun() {
         let a = document.getElementById("divCount");
         a.querySelector("p").innerHTML = "Welcome to Tutorialspoint!";
      }
   </script>
</body>
</html>