Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript DOM

JavaScript DOM Selectors

Written by Published

JavaScript finds elements on a page with getElementById, querySelector and querySelectorAll.

Before you can change an element you have to find it.

querySelector takes a CSS selector, which makes it the most flexible choice.

Example

Example

javascript

document.body.innerHTML = '<p class="note">Hello</p>';

const note = document.querySelector(".note");

console.log(note.textContent);

The output is Hello.

The Main Selectors

getElementById finds one element by its id.

querySelector returns the first match for a CSS selector.

querySelectorAll returns every match as a NodeList.

Syntax

Syntax

javascript

document.getElementById("id");
document.querySelector(".class");
document.querySelectorAll("p");

getElementById takes a bare id; querySelector needs the #.

Selecting by Id

Ids are unique, so this always gives one element or null.

Example

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.

Selecting Many Elements

querySelectorAll returns a list even when only one thing matches.

Example

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.

Any CSS Selector Works

This is what makes querySelector so useful.

Example

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.

Nothing Found Gives null

Reading a property of null throws, so a missing element is worth checking for.

Example

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.

Searching Inside an Element

These methods work on any element, not just document.

Example

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

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>

Try It Yourself

Run the above example in the Try It Editor.

Try another selector:

Add a second element with class note and watch the count change.

Important Points

  • getElementById takes an id without the hash.
  • querySelector takes any CSS selector and returns the first match.
  • querySelectorAll returns every match as a NodeList.
  • A failed querySelector returns null.
  • Both methods can be called on an element to search inside it.

Conclusion

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.

PreviousJavaScript DOMNextJavaScript DOM Content