DOM Intro

JavaScript HTML DOM

The HTML DOM (Document Object Model) is a programming interface for web documents. It allows JavaScript to dynamically access, create, and modify the content, structure, and style of HTML elements.

The HTML DOM (Document Object Model)

When a web page is loaded, the browser parses the HTML and creates an in-memory representation called the Document Object Model (DOM). This model represents the page as a structured tree of objects.

The HTML DOM model is constructed as a tree of Objects:

Imagine your HTML document as a family tree. The <html> element is the root. It has child nodes like <head> and <body>. Each of these can, in turn, have their own children (e.g., <body> might contain a <p> and a <div>). This hierarchical structure of nodes is how JavaScript ‘sees’ and navigates the page. Each HTML element, piece of text, or comment becomes a node in this tree.

Using the DOM, JavaScript gains the ability to create dynamic and interactive web pages. It can:

• Change the text content and HTML structure of elements.
• Modify attributes (like src of an image or href of a link) and data-* attributes.
• Alter CSS styles to dynamically change appearance.
• Remove existing HTML elements and attributes.
• Add new HTML elements and attributes to the page.
• Respond to user interactions (like clicks, mouse movements, key presses) and other browser events using event listeners.
• Create and dispatch custom events.

What You Will Learn

In the next chapters of this tutorial you will learn:

• How to find and select HTML elements using various methods (e.g., getElementById, querySelector, querySelectorAll).
• How to read and modify the content (e.g., textContent, innerHTML) and attributes of HTML elements.
• How to change the CSS styles of elements dynamically.
• How to effectively handle DOM events using addEventListener.
• How to create, add, and remove HTML elements from the DOM tree.

What is the DOM?

The DOM is a standard defined by the W3C (World Wide Web Consortium) and the WHATWG (Web Hypertext Application Technology Working Group). It provides a common way for programs to interact with web documents.

The DOM defines a standard for accessing documents:

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

Historically, the W3C DOM standard was seen in parts. While these distinctions are less emphasized now for web developers primarily working with HTML, the conceptual separation was:

• Core DOM: Provided a general model for any structured document.
• XML DOM: Specifically for XML documents.
• HTML DOM: Tailored for HTML documents, which is our primary focus for web development.

Modern web development primarily interacts with the HTML DOM, which incorporates features that make working with HTML documents intuitive and powerful.

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

• HTML elements as objects, each with its own properties and methods.
• Properties that represent the attributes and content of these elements (e.g., element.id, element.className, element.textContent).
• Methods to manipulate these elements (e.g., element.appendChild(), element.setAttribute(), element.querySelector()).
• Events that occur on these elements (e.g., ‘click’, ‘mouseover’, ‘submit’) and mechanisms to react to them.

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.