DOM & Events · Full Stack Web Development

Explanation

Use the Document Object Model to select elements, listen for events, and update the UI without a full page reload.

Code example

javascript

const form = document.querySelector("#todo-form");
const list = document.querySelector("#todo-list");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const input = form.elements.namedItem("task");
  if (!(input instanceof HTMLInputElement) || !input.value.trim()) return;
  const item = document.createElement("li");
  item.textContent = input.value.trim();
  list.append(item);
  input.value = "";
});

Helpful resources

MDN: Introduction to the DOM
Official DOM documentation on MDN.
DocumentationFreeOfficial45 min
DOM Crash Course — Traversy Media
Hands-on DOM manipulation on YouTube.
YoutubeFree60 min

Exercise

Create an interactive todo UI with add, complete toggle, and delete using DOM APIs.

Your notes