How to use querySelectorAll In Javascript
Similar to querySelector, but it returns a NodeList containing all elements that match the specified CSS selector.
Syntax:
document.querySelectorAll('selector')
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>querySelectorAll Example</title>
</head>
<body>
<h1 class="selector">w3wiki</h1>
<p class="selector">
This is showing how to select DOM element
using tag name
</p>
<script>
const elements = document.querySelectorAll('.selector');
elements[0].style.color = "green";
elements[1].style.color = "red";
elements[0].style.textAlign = "center";
elements[1].style.textAlign = "center";
elements[0].style.marginTop = "60px";
</script>
</body>
</html>
Output:
How to select DOM Elements in JavaScript ?
Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript. It allows developers to interact with and manipulate elements on a webpage dynamically. Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or modifying styles.
Below are the approaches to select DOM elements in JavaScript:
Table of Content
- Using getElementById
- Using getElementsByClassName
- Using getElementsByTagName
- Using querySelector
- Using querySelectorAll
Contact Us