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
An element inside another element in JavaScript?
In JavaScript, accessing elements nested inside other elements is a common task when working with the DOM. We can access inner elements using various methods and check containment relationships using the contains() method.
JavaScript provides several ways to access nested elements. The most common approach uses getElementsByTagName() on a parent element, while contains() helps verify parent-child relationships.
Accessing Nested Elements
To access an element inside another element, we first get the parent element, then search within it:
document.getElementById('parentID').getElementsByTagName('tagName')[index]
document.getElementById('parentID').getElementsByClassName('className')[index]
Method 1: Using getElementsByTagName()
This example shows how to access and modify elements inside a parent container:
<!DOCTYPE html>
<html>
<head>
<title>Accessing Nested Elements</title>
</head>
<body>
<h3>Accessing Elements Inside Another Element</h3>
<div id="main">
<p>Original text 1</p>
<p>Original text 2</p>
</div>
<script>
// Access first paragraph inside the div
var firstP = document.getElementById('main').getElementsByTagName('p')[0];
firstP.innerHTML = 'Modified text 1';
// Access second paragraph inside the div
var secondP = document.getElementById('main').getElementsByTagName('p')[1];
secondP.innerHTML = 'Modified text 2';
console.log('Elements modified successfully');
</script>
</body>
</html>
Elements modified successfully
Method 2: Using getElementsByClassName()
You can also access nested elements by their class names:
<!DOCTYPE html>
<html>
<head>
<title>Using Class Names</title>
</head>
<body>
<h3>Accessing Elements by Class Name</h3>
<div id="container">
<p class="social-link">LinkedIn</p>
<p class="social-link">Facebook</p>
</div>
<script>
// Access element by class name within parent
var socialLinks = document.getElementById('container').getElementsByClassName('social-link');
socialLinks[0].innerHTML = 'Twitter';
console.log('First social link changed to:', socialLinks[0].innerHTML);
</script>
</body>
</html>
First social link changed to: Twitter
Checking Element Containment with contains()
The contains() method checks if one element is contained within another:
parentElement.contains(childElement) // Returns true or false
Example: Using contains() Method
<!DOCTYPE html>
<html>
<head>
<title>Element Containment Check</title>
</head>
<body>
<h3>Checking Element Containment</h3>
<div id="parent">
<p id="child">I am inside the div</p>
</div>
<p id="outside">I am outside the div</p>
<script>
var parent = document.getElementById('parent');
var child = document.getElementById('child');
var outside = document.getElementById('outside');
var childIsInside = parent.contains(child);
var outsideIsInside = parent.contains(outside);
console.log('Child element is inside parent:', childIsInside);
console.log('Outside element is inside parent:', outsideIsInside);
</script>
</body>
</html>
Child element is inside parent: true Outside element is inside parent: false
Comparison of Methods
| Method | Use Case | Returns |
|---|---|---|
getElementsByTagName() |
Access by HTML tag | HTMLCollection of elements |
getElementsByClassName() |
Access by CSS class | HTMLCollection of elements |
contains() |
Check containment | Boolean (true/false) |
Conclusion
Use getElementsByTagName() or getElementsByClassName() to access nested elements, and contains() to verify parent-child relationships. These methods provide efficient ways to navigate and manipulate DOM hierarchies.
10K+ Views
