JS HTML DOM

HTML DOM

The HTML DOM (Document Object Model) is a programming interface for web pages. It represents the page as a tree of nodes that JavaScript can read and modify.

console.log(document);
console.log(document.title);

HTML DOM API

The DOM API is built into the browser. It allows you to select elements, update content, change styles, handle events, and more.

console.log(document.body);
console.log(document.URL);

Selecting Elements

Use modern selectors (querySelector / querySelectorAll) for most tasks.

const title = document.querySelector("h1");
const items = document.querySelectorAll(".item");

console.log(title.textContent);
console.log(items.length);

Other common selection methods:

document.getElementById("demo");
document.getElementsByClassName("item");
document.getElementsByTagName("p");

Changing HTML

You can change text or HTML content. Prefer textContent for plain text (safer) and use innerHTML only when you really need HTML.

const box = document.querySelector("#box");

box.textContent = "Hello DOM";

// Be careful with innerHTML (can cause XSS if used with untrusted input)
box.innerHTML = "<strong>Bold text</strong>";

Create and insert elements safely using DOM methods:

const list = document.querySelector("#list");

const li = document.createElement("li");
li.textContent = "New item";
list.appendChild(li);

Changing CSS

You can change styles using inline styles or CSS classes. Prefer class toggling for clean design.

const panel = document.querySelector("#panel");

// Inline style
panel.style.padding = "12px";
panel.style.borderRadius = "8px";

// Class toggle (recommended)
panel.classList.add("active");
panel.classList.toggle("hidden");

Form Validation

You can validate forms using HTML attributes and JavaScript. The DOM provides checkValidity() and reportValidity().

const form = document.querySelector("#signup");
const email = document.querySelector("#email");

form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) {
    e.preventDefault();
    form.reportValidity();
    return;
  }

  // Custom validation example
  if (!email.value.includes("@")) {
    e.preventDefault();
    alert("Please enter a valid email.");
  }
});

DOM Animations

For simple animations, you can use CSS classes and toggle them with JavaScript. This is often better than manual timers.

// CSS idea:
// .fade-in { opacity: 1; transition: opacity 300ms; }
// .hidden  { opacity: 0; }

const modal = document.querySelector("#modal");
const openBtn = document.querySelector("#open");

openBtn.addEventListener("click", () => {
  modal.classList.remove("hidden");
  modal.classList.add("fade-in");
});

If needed, you can animate with JavaScript timing, but prefer CSS for smoothness.

const box2 = document.querySelector("#box2");
let x = 0;

const timer = setInterval(() => {
  x += 2;
  box2.style.transform = `translateX(${x}px)`;

  if (x >= 200) clearInterval(timer);
}, 16);

Document Reference

The document object represents the whole page. Common properties and methods:

• document.title, document.URL
• document.querySelector(), document.querySelectorAll()
• document.createElement()
• document.addEventListener()

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM ready");
});

Element Reference

Elements have useful properties and methods:

• textContent, innerHTML
• classList, style
• setAttribute(), getAttribute()
• appendChild(), remove()

const el = document.querySelector("#demo");

el.setAttribute("data-id", "123");
console.log(el.getAttribute("data-id"));

el.classList.add("highlight");

Next Step

Continue with JS Events to learn how to react to clicks, keyboard input, forms, and other user actions.