20. JavaScript DOM Selecting Elements

What you will learn

• How to find elements by id, class, tag, and CSS selector
• The difference between one element and a list of elements
• How to loop through a selection
• How to move around the tree

Why select elements?

Before JavaScript can change anything on a page, it has to find the element. The methods below do that. The two most useful are querySelector and querySelectorAll, because they use the same CSS selectors you already know.

Overview of methods

For new code, getElementById, querySelector, and querySelectorAll cover almost everything.

By id

<h2 id="main-title">Original</h2>

<script>
  const title = document.getElementById("main-title");
  title.textContent = "Found by id";
</script>

Notice there is no # in getElementById. You pass just the name.

By CSS selector

querySelector takes any CSS selector, including the # for ids, the dot for classes, and combinations. It returns the first match.

<p class="note">First note</p>
<p class="note">Second note</p>
<div id="box"><p>Paragraph inside the box</p></div>

<script>
  document.querySelector(".note").style.color = "crimson";          // first note only
  document.querySelector("#box p").style.fontWeight = "bold";       // p inside #box
</script>

Selecting many elements

querySelectorAll returns a list. Loop through it to change every match.

<ul>
  <li class="item">One</li>
  <li class="item">Two</li>
  <li class="item">Three</li>
</ul>

<script>
  const items = document.querySelectorAll(".item");

  items.forEach(function (item, index) {
    item.textContent = (index + 1) + ". " + item.textContent;
    item.style.color = "#0d6efd";
  });
</script>

A list from querySelectorAll supports forEach and for...of, and has a length. To use array methods such as map or filter, first convert it with Array.from(items).

One or many: the classic mistake

querySelectorAll returns a list, so this fails:

document.querySelectorAll(".item").style.color = "red";   // Error: a list has no style

Loop through the list instead, or use querySelector when you want just one.

Always check for null

If nothing matches, getElementById and querySelector return null, and using it crashes the script. Guard against it when an element might not exist:

<p id="demo"></p>

<script>
  const missing = document.querySelector("#does-not-exist");

  if (missing) {
    missing.textContent = "Found it";
  } else {
    document.getElementById("demo").textContent = "That element is not on this page.";
  }
</script>

Searching inside an element

You can call querySelector on any element to search only inside it.

<div id="a"><p class="msg">Message in A</p></div>
<div id="b"><p class="msg">Message in B</p></div>

<script>
  const box = document.getElementById("b");
  box.querySelector(".msg").style.background = "yellow";   // only inside #b
</script>

Moving around the tree

From one element you can reach its relatives.

<ul id="list">
  <li>One</li>
  <li id="two">Two</li>
  <li>Three</li>
</ul>
<p id="demo"></p>

<script>
  const two = document.getElementById("two");

  document.getElementById("demo").innerHTML =
    "Parent id: " + two.parentElement.id + "<br>" +
    "Before: " + two.previousElementSibling.textContent + "<br>" +
    "After: " + two.nextElementSibling.textContent + "<br>" +
    "Items in the list: " + two.parentElement.children.length;
</script>

Common mistakes

• Adding # or . to getElementById. It takes the bare name.
• Forgetting the # or . in querySelector.
• Treating the list from querySelectorAll as a single element.
• Not checking for null when the element may be missing.
• Running the script before the elements exist.

<p class="tip">Tip one</p>
<p class="tip">Tip two</p>
<p>Normal text</p>

<script>
  const tips = document.querySelectorAll(".tip");

  tips.forEach(function (tip) {
    tip.style.backgroundColor = "lightyellow";
  });
</script>

Summary

• Use getElementById, querySelector, and querySelectorAll to find elements.
• Remember: one element or a list, and check for null.
• Reach relatives with parentElement, children, and sibling properties.