//
In this tutorial, you'll learn how to select DOM elements using three common methods in JavaScript: getElementById, querySelector, and querySelectorAll. Understanding these methods is crucial for manipulating HTML content and styling dynamically. Whether you're building a simple web page or a complex web application, selecting the right elements at the right time is essential.
DOM (Document Object Model) manipulation is a fundamental part of JavaScript development. The DOM represents the structure of an HTML document as a tree of nodes, where each node is an object representing a part of the document. Selecting these nodes allows you to interact with and modify the content, attributes, and styles of your web page.
In this tutorial, we'll explore three primary methods for selecting DOM elements:
getElementById: Retrieves a single element by its unique ID.querySelector: Selects the first element that matches a specified CSS selector.querySelectorAll: Selects all elements that match a specified CSS selector and returns them as a NodeList.Each method has its own use cases, and understanding when to use which method will help you write more efficient and effective JavaScript code.
getElementByIdThe getElementById method is the simplest way to select an element in the DOM. It requires the unique ID of the element you want to select. This method returns a single element or null if no element with that ID exists.
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>getElementById Example</title>7</head>8<body>9<div id="myElement">Hello, World!</div>10<script src="script.js"></script>11</body>12</html>
1// script.js2const element = document.getElementById('myElement');3console.log(element.textContent); // Output: Hello, World!
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>querySelector Example</title>7</head>8<body>9<input type="text" name="username" value="JohnDoe">10<script src="script.js"></script>11</body>12</html>
1// script.js2const inputElement = document.querySelector('input[name="username"]');3console.log(inputElement.value); // Output: JohnDoe
1// script.js2const elements = document.querySelectorAll('.myClass');3for (let i = 0; i < elements.length; i++) {4console.log(elements[i].textContent);5}
Hello, World! Another Element
querySelectorAll when you need to select multiple elements and perform operations on each one.Let's create a simple web application that allows users to add items to a list. We'll use getElementById, querySelector, and querySelectorAll to manipulate the DOM elements.
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>DOM Manipulation Example</title>7<style>8ul {9list-style-type: none;10padding: 0;11}12li {13margin: 5px 0;14}15</style>16</head>17<body>18<h1>To-Do List</h1>19<input type="text" id="newItemInput">20<button id="addButton">Add Item</button>21<ul id="itemList"></ul>22<script src="script.js"></script>24</body>25</html>
1// script.js2document.getElementById('addButton').addEventListener('click', function() {3const newItemInput = document.getElementById('newItemInput');4const newItemText = newItemInput.value.trim();5if (newItemText !== '') {7const itemList = document.getElementById('itemList');8const newListItem = document.createElement('li');9newListItem.textContent = newItemText;10itemList.appendChild(newListItem);11// Clear the input field13newItemInput.value = '';14}15});
In this example, we use getElementById to select the button and input elements. When the button is clicked, we retrieve the value from the input field using getElementById, create a new list item element using document.createElement, set its text content, and append it to the unordered list using appendChild.
| Method | Description |
|---|---|
getElementById | Selects a single element by its unique ID. |
querySelector | Selects the first element that matches a specified CSS selector. |
querySelectorAll | Selects all elements that match a specified CSS selector and returns them as a NodeList. |
getElementById for quick selection of a single, specific element.querySelector when you need to select a single element based on complex criteria.querySelectorAll when you need to select multiple elements and perform operations on each one.Now that you know how to select DOM elements, the next step is learning how to change their HTML content and CSS styles. In the next tutorial, we'll explore methods like innerHTML, textContent, style, and more. Stay tuned!