← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 19 of 26

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:

  1. getElementById and querySelector
  2. querySelectorAll
  3. createElement and appendChild
  4. removeChild and innerHTML
  5. classList and setAttribute
Syntax
javascript 
document.createElement("tag");
parent.appendChild(element);
element.remove();
element.setAttribute("name", value);

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>
  // Print `document.getElementById("intro")` to the console
  console.log(document.getElementById("intro"));
  // Print `document.querySelector(".missing, #intro")` to the console
  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>
  // Call `document.querySelectorAll(".item").forEach(el => console.log(el.textContent))`
  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>
  // Declare the constant `p`, set to `document.createElement("p")`
  const p = document.createElement("p");
  // Assign "New paragraph" to `p.textContent`
  p.textContent = "New paragraph";
  // Call `document.getElementById("container").appendChild(p)`
  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>
  // Declare the constant `box`, set to `document.getElementById("box")`
  const box = document.getElementById("box");
  // Call `box.removeChild(document.getElementById("child"))`
  box.removeChild(document.getElementById("child"));
  // Assign "<p>Replaced content</p>" to `box.innerHTML`
  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>
  // Declare the constant `box`, set to `document.getElementById("box")`
  const box = document.getElementById("box");
  // Call `box.classList.remove("hidden")`
  box.classList.remove("hidden");
  // Call `box.classList.add("visible")`
  box.classList.add("visible");
  // Call `box.setAttribute("data-status", "active")`
  box.setAttribute("data-status", "active");
</script>
Live Example
Related Topics

JS DOM · JS DOM Navigation · JS DOM Collections · JS Array Methods

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using getElementById with a leading # symbol, unlike querySelector, getElementById expects just the plain id name.
  2. Forgetting that querySelectorAll returns a static NodeList, not a live collection that automatically updates as the DOM changes.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.