JavaScript DOM Elements

Find, then change

Almost every DOM script is two steps. Find a node. Then read or write it. The finders returnnull (one node) or an empty list (many nodes) when nothing matches. Check that before you set textContent.

getElementById

Ids are unique in a document. document.getElementById("title") returns that element or null. Do not put a # in the argument — that is for selectors, not for this method.

<h1 id="title">Harbor notes</h1>
<script>
  const title = document.getElementById("title");
  title.textContent = "Harbor notes — evening";
  console.log(title.id);
</script>

querySelector

querySelector takes a CSS selector and returns the first match.#id, .class, p, and combinations likeul.menu li all work. Use it when you do not have an id, or when the CSS path is the natural description.

<p class="note">First note.</p>
<p class="note">Second note.</p>
<script>
  const note = document.querySelector(".note");
  note.textContent = "Updated first note.";
</script>

Only the first paragraph changes. The second stays as written. For every match, usequerySelectorAll.

querySelectorAll

This returns a NodeList. It is not an array, but you can loop it with for...ofor forEach. It does not update live after you add new nodes (unlike the oldgetElementsByClassName collections).

<ul>
  <li class="item">Charts</li>
  <li class="item">Tide</li>
  <li class="item">Roster</li>
</ul>
<script>
  const items = document.querySelectorAll(".item");
  for (const item of items) {
    item.textContent = item.textContent + " — ready";
  }
  console.log(items.length);
</script>

Text, HTML, and attributes

textContent is plain text. innerHTML is markup — the browser parses tags you assign. Prefer textContent for values you do not fully control. Attributes use getAttribute and setAttribute, or properties likehref and value.

<p id="who">Guest</p>
<a id="docs" href="/javascript/intro">Intro</a>
<input id="name" value="Ada">
<script>
  const who = document.getElementById("who");
  const docs = document.getElementById("docs");
  const name = document.getElementById("name");

  who.textContent = name.value;
  docs.setAttribute("href", "/javascript/dom");
  docs.textContent = "DOM chapter";
  console.log(docs.getAttribute("href"));
</script>

classList

element.classList.add, remove, and toggle change classes without touching the rest of the class string. That is the usual way to show or hide a panel or mark a selected item.

What to remember

• getElementById("x") — no hash. querySelector("#x") — with hash.
• querySelectorAll is for every match; loop the NodeList.
• Write textContent for text. Use attributes for href, value, and the rest.
• If the finder returns null, the selector or id is wrong — log it before chaining.

Next: event listeners — attaching more than one handler to the same node.