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

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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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

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