---
title: DOM Intro
description: "> With the HTML DOM, JavaScript can access and change all the elements of an HTML document. --- ## The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a **D**ocument **O**bject **M**odel of the page. The **HTML DOM** model…"
url: "https://apprentice.mn/docs/dom-intro/"
updated: "2021-05-19"
category: Javascript
---

# DOM Intro

> With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

---

## The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a **D**ocument **O**bject **M**odel of the page.

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

### The HTML DOM Tree of Objects

 ![DOM HTML tree](https://www.w3schools.com/js/pic_htmltree.gif)

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page

---

## What You Will Learn

In the next chapters of this tutorial you will learn:

- How to change the content of HTML elements
- How to change the style (CSS) of HTML elements
- How to react to HTML DOM events
- How to add and delete HTML elements

---

## What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

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.”*

The W3C DOM standard is separated into 3 different parts:

- Core DOM – standard model for all document types
- XML DOM – standard model for XML documents
- HTML DOM – standard model for HTML documents

---

## What is the HTML DOM?

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

- The HTML elements as **objects**
- The **properties** of all HTML elements
- The **methods** to access all HTML elements
- The **events** for all HTML elements

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

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-intro%2F&linkname=DOM%20Intro](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-intro%2F&linkname=DOM%20Intro)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-intro%2F&linkname=DOM%20Intro](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-intro%2F&linkname=DOM%20Intro)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-intro%2F&linkname=DOM%20Intro](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-intro%2F&linkname=DOM%20Intro)[https://www.addtoany.com/share](https://www.addtoany.com/share)