JS DOM Methods

Think of a toolkit specifically for building and rearranging furniture, one tool finds a specific piece, another builds a brand new one from scratch, another attaches it to the right spot, and another removes a piece you no longer need. DOM methods are that toolkit for JavaScript, getElementById and querySelector find existing elements, createElement builds new ones, appendChild attaches them, and removeChild takes them away, giving you full control over a page's structure. These methods are the actual building blocks behind every dynamic feature across cookiescursor.com, from a simple text update to constructing an entirely new component on the fly.

In this page:

getElementById and querySelector
querySelectorAll
createElement and appendChild
removeChild and innerHTML
classList and setAttribute

getElementById and querySelector

getElementById() finds a single element by its exact id attribute, while querySelector() finds the first element matching any valid CSS selector, offering far more flexibility, like classes, attributes, or nested combinations.

Note: querySelector accepts the same selector syntax you already know from CSS, .class, #id, or even tag[attribute=value].

Warning: getElementById expects a plain id without the # symbol, while querySelector requires the # prefix for id-based selectors, mixing these up is a common mistake.

Example: getElementById and querySelector

javascript

<p id="intro">Hello</p>
<script>
  console.log(document.getElementById("intro"));
  console.log(document.querySelector(".missing, #intro"));
</script>

querySelectorAll

querySelectorAll() returns every element matching a given CSS selector as a NodeList, which can be looped over with forEach or a standard for...of loop to process every matching element.

Note: A NodeList from querySelectorAll supports forEach directly, no need to convert it to an array first for basic iteration.

Warning: querySelectorAll returns a static snapshot, elements added to the page afterward won't automatically appear in a NodeList you already captured.

Example: querySelectorAll

javascript

<p class="item">A</p>
<p class="item">B</p>
<script>
  document.querySelectorAll(".item").forEach(el => console.log(el.textContent));
</script>

createElement and appendChild

createElement() builds a brand new element in memory, which doesn't appear on the page until it's attached somewhere using appendChild(), which adds it as the last child of a chosen parent element.

Note: Set a new element's content and attributes before appending it, that way it appears on the page fully formed in a single visible step.

Warning: An element created with createElement exists only in memory until appendChild (or a similar method) actually attaches it to the visible DOM tree.

Example: createElement and appendChild

javascript

<div id="container"></div>
<script>
  const p = document.createElement("p");
  p.textContent = "New paragraph";
  document.getElementById("container").appendChild(p);
</script>

removeChild and innerHTML

removeChild() removes a specific child element from its parent, requiring you to call it on the parent itself, while innerHTML lets you read or completely replace an element's inner markup in one step.

Note: For removing just one specific element you already have a reference to, element.remove() is often simpler than parent.removeChild(element).

Warning: Setting innerHTML with untrusted, user-provided content can expose a page to cross-site scripting risks, sanitize such input carefully first.

Example: removeChild and innerHTML

javascript

<div id="box"><span id="child">Remove me</span></div>
<script>
  const box = document.getElementById("box");
  box.removeChild(document.getElementById("child"));
  box.innerHTML = "<p>Replaced content</p>";
</script>

classList and setAttribute

classList provides methods like add(), remove(), and toggle() for managing an element's CSS classes without manually parsing the class string, and setAttribute() sets any HTML attribute's value directly.

Note: classList.toggle() is perfect for interactive show/hide or active/inactive style switches triggered by a click.

Warning: Directly overwriting the className string property replaces every existing class at once, classList's methods are safer for adding or removing just one class.

Example: classList and setAttribute

javascript

<div id="box" class="hidden"></div>
<script>
  const box = document.getElementById("box");
  box.classList.remove("hidden");
  box.classList.add("visible");
  box.setAttribute("data-status", "active");
</script>

Common Mistakes

Using getElementById with a leading # symbol, unlike querySelector, getElementById expects just the plain id name.
Forgetting that querySelectorAll returns a static NodeList, not a live collection that automatically updates as the DOM changes.
Trying to removeChild an element from the wrong parent, removeChild must be called on the actual direct parent of the element being removed.

Chapter Summary

getElementById, querySelector, and querySelectorAll each select elements from the DOM, differing in what selectors they accept and how many elements they return.
createElement builds a new element, and appendChild or removeChild attach or detach it from the DOM tree.
innerHTML, classList, and setAttribute let you modify an element's content, CSS classes, and attributes directly.

Browser Support

All standard DOM methods covered here are supported identically across every modern browser and are foundational, stable web platform features.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS DOM Collections Next Lesson → JS Events Advanced

JS DOM Methods

getElementById and querySelector

querySelectorAll

createElement and appendChild

removeChild and innerHTML

classList and setAttribute

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code