Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Tag names of body element's children in JavaScript?
In JavaScript, you can access the tag names of child elements within the body using the children property or the querySelector method. The children property returns an HTMLCollection of all child elements, while querySelector allows you to target specific elements using CSS selectors.
- Using the children property to get all child elements
- Using the querySelector method to select specific child elements
Both approaches provide different ways to access and manipulate child elements within the DOM structure.
Using the children Property
The DOM children property returns an HTMLCollection of all child elements of a given element. This property only includes element nodes, excluding text nodes and comment nodes (unlike childNodes). The collection can be accessed using index numbers.
Syntax
element.children
Return Value
Returns an HTMLCollection of element nodes that can be accessed by indexing.
Example
This example demonstrates getting the count of child elements and accessing their tag names:
<!DOCTYPE html>
<html>
<head>
<title>Tag names of body element's children in JavaScript</title>
</head>
<body style="text-align:center">
<p>The count of div children is:</p>
<div id="result"></div>
<div id="divCount">
<p>This is first paragraph element</p>
<h4>This is a heading element</h4>
<span>This is a span element</span>
</div>
<script>
let parentDiv = document.getElementById("divCount");
let childCount = parentDiv.children.length;
// Display count and tag names
let output = "Child count: " + childCount + "<br>Tag names: ";
for (let i = 0; i < parentDiv.children.length; i++) {
output += parentDiv.children[i].tagName + " ";
}
document.getElementById("result").innerHTML = output;
</script>
</body>
</html>
Child count: 3 Tag names: P H4 SPAN
Using the querySelector Method
The querySelector() method returns the first element that matches a specified CSS selector. To get all matching elements, use querySelectorAll(). This method is useful when you need to target specific child elements based on their selectors.
Syntax
element.querySelector(selectors)
Return Value
Returns the first element that matches the specified CSS selector(s), or null if no match is found.
Example
This example shows how to select and modify specific child elements using querySelector:
<!DOCTYPE html>
<html>
<head>
<title>Tag names of body element's children in JavaScript</title>
</head>
<body style="text-align:center">
<div id="container">
<p>This is your "p" element in div.</p>
<h4>This is your "h4" element in div.</h4>
<p>This is another paragraph.</p>
</div>
<p>Click the button to modify the first paragraph in the div.</p>
<button onclick="modifyElement()">Click Here</button>
<script>
function modifyElement() {
let container = document.getElementById("container");
// Select first paragraph and get its tag name
let firstP = container.querySelector("p");
console.log("Selected element tag:", firstP.tagName);
// Modify its content
firstP.innerHTML = "Welcome to TutorialsPoint!";
firstP.style.color = "blue";
}
</script>
</body>
</html>
Selected element tag: P (The first paragraph text changes to "Welcome to TutorialsPoint!" in blue)
Comparison
| Method | Returns | Use Case |
|---|---|---|
children |
HTMLCollection of all child elements | When you need all child elements |
querySelector |
First matching element | When you need a specific element |
Conclusion
Use the children property to access all child elements and their tag names, or querySelector to target specific elements. Both methods are essential for DOM manipulation and accessing element information in JavaScript.
501 Views
