DOM Introduction

1 min read | JavaScript Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page as a tree of nodes that JavaScript can manipulate.

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

The document Object

document is the entry point to the DOM. It provides methods for selecting, creating, and modifying elements.

document.title = "New Page Title";
console.log(document.title);

const divs = document.getElementsByTagName("div");
console.log("Number of divs:", divs.length);

document.body.style.backgroundColor = "lightblue";

DOM Tree Structure

Every HTML element, attribute, and text is a node in the DOM tree. You can navigate using properties like parentNode, childNodes, and children.

const body = document.body;
console.log("Parent of body:", body.parentNode);
console.log("Children of body:", body.children.length);

for (let child of body.children) {
  console.log(child.tagName);
}

Concepts Explained