Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Tag names of body element's children in JavaScript?
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>
261 Views
