DOM Methods

By the end of this lesson, you can create, select, insert, update, and remove page elements using core JavaScript DOM methods.

What it is

The DOM, or Document Object Model, is a tree of objects that represents an HTML page. JavaScript uses DOM methods to inspect and change that tree without reloading the page. The most common methods live on document and on element nodes. Related terms include node, element, parent, child, selector, and event listener.

Why it matters

• Build dynamic interfaces, such as adding a task to a list after a button click.
• Read user input from forms and show feedback immediately.
• Remove or replace parts of the page, such as closing a notification.
• Query elements by id, class, or CSS selector before changing them.
• Attach behavior to elements with methods like addEventListener.

Syntax or steps

The smallest useful pattern is: create an element, set its content or attributes, then attach it to a parent element.

const box = document.createElement("div");
box.textContent = "Hello";
document.body.appendChild(box);

To change existing content, first select it, then modify it:

const title = document.querySelector("h1");
title.textContent = "Updated title";

Example

This example adds a new list item when a button is clicked. It assumes the page contains a list and a button.

<ul id="tasks"></ul>
<button id="add">Add task</button>

<script>
const list = document.querySelector("#tasks");
const button = document.querySelector("#add");

button.addEventListener("click", () => {
  const item = document.createElement("li");
  item.textContent = "New task";
  list.appendChild(item);
});
</script>

Part by part:

• document.querySelector("#tasks") finds the existing list by its id.
• button.addEventListener("click", ...) waits for a user click.
• document.createElement("li") creates a new list item in memory.
• item.textContent = "New task" sets safe text content.
• list.appendChild(item) inserts the new item as the last child of the list.

Common mistakes

• Forgetting to attach the element. createElement only makes a node; it is not visible until you use appendChild, insertBefore, or a similar method.
• Assuming appendChild copies. If the node already exists in the DOM, appendChild moves it to the new parent.
• Using innerHTML with untrusted data. It can parse HTML and create XSS risks. Prefer textContent for plain text.
• Not checking for null. querySelector returns null if no element matches, so guard before calling methods on it.

When to use it

Use DOM methods when you need safe, incremental changes to a page. Compare them with innerHTML, which replaces markup as a string.

Practice

Guided exercise: Add an <input id="taskText"> to the example. When the button is clicked, create a list item whose text comes from the input.

const input = document.querySelector("#taskText");
item.textContent = input.value;

Challenge: Give each new list item a remove button. Expected behavior: clicking the remove button deletes only that item.

Hint: Create a button inside the li, add a click listener, and call item.remove().

Quick check

Question: What happens if you call appendChild on an element that is already in the DOM?

Answer: It moves the element to the new parent instead of creating a duplicate.

Summary

DOM methods let JavaScript treat a page as a tree of objects that can be queried, created, updated, and removed. The core workflow is select or create an element, change its properties, then attach or detach it from the document.