JavaScript DOM
JavaScript finds elements on a page with
getElementById,querySelectorandquerySelectorAll.
Before you can change an element you have to find it.
querySelector takes a CSS selector, which makes it the most flexible choice.
Example
javascript
document.body.innerHTML = '<p class="note">Hello</p>';
const note = document.querySelector(".note");
console.log(note.textContent);The output is Hello.
getElementById finds one element by its id.
querySelector returns the first match for a CSS selector.
querySelectorAll returns every match as a NodeList.
Syntax
javascript
document.getElementById("id");
document.querySelector(".class");
document.querySelectorAll("p");getElementById takes a bare id; querySelector needs the #.
Ids are unique, so this always gives one element or null.
Example
javascript
document.body.innerHTML = '<p id="demo">By id</p>';
console.log(document.getElementById("demo").textContent);
console.log(document.querySelector("#demo").textContent);Both lines find the same element.
querySelectorAll returns a list even when only one thing matches.
Example
javascript
document.body.innerHTML = '<p>One</p><p>Two</p><p>Three</p>';
const paragraphs = document.querySelectorAll("p");
console.log(paragraphs.length);
console.log(paragraphs[0].textContent);The list is indexed like an array.
This is what makes querySelector so useful.
Example
javascript
document.body.innerHTML =
'<ul><li class="item">A</li><li class="item done">B</li></ul>';
console.log(document.querySelectorAll("li.item").length);
console.log(document.querySelector("li.done").textContent);Classes, attributes and nesting can all be used.
Reading a property of null throws, so a missing element is worth checking for.
Example
javascript
document.body.innerHTML = "<p>Only this</p>";
const missing = document.querySelector("#nothing");
console.log(missing === null ? "not found" : "found");querySelectorAll gives an empty list instead of null.
These methods work on any element, not just document.
Example
javascript
document.body.innerHTML =
'<div id="box"><span>Inside</span></div><span>Outside</span>';
const box = document.getElementById("box");
console.log(box.querySelector("span").textContent);Only the span inside the box is searched.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript DOM Selectors</title>
</head>
<body>
<h1>DOM Selectors</h1>
<p id="first">First paragraph</p>
<p class="note">A note</p>
<p id="out"></p>
<script>
const first = document.getElementById("first");
const note = document.querySelector(".note");
const all = document.querySelectorAll("p");
document.getElementById("out").textContent =
first.textContent + " / " + note.textContent + " / " + all.length;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try another selector:
Add a second element with class note and watch the count change.
getElementById takes an id without the hash.querySelector takes any CSS selector and returns the first match.querySelectorAll returns every match as a NodeList.querySelector returns null.Selecting elements is the first step of nearly every DOM task.
querySelector covers almost every case because it speaks CSS.
Always consider what happens when nothing matches.