How to use querySelector In Javascript
This method selects the first element that matches a specified CSS selector. It returns only one element.
Syntax:
document.querySelector('selector')
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>querySelector Example</title>
</head>
<body>
<div class="gfg">w3wiki</div>
<script>
const element =
document.querySelector('.gfg');
element.style.color = "green";
element.style.textAlign = "center";
element.style.margin = "30px";
element.style.fontSize = "30px";
</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