Flash cards
Review the key moves
What is the main idea behind The HTML DOM?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<p id="___"></p>Put the learning moves in the order that makes the concept easiest to apply.
HTML Document Object Model
The HTML DOM (HTML Document Object Model) is an Object Model for HTML Documents .
The HTML DOM is a tree of Nodes that represents an HTML Page .
The DOM Tree
When a web page loads, the browser creates a tree-like representation of the HTML document.
Each part of the document are nodes in the tree:
| Node | Description |
|---|---|
| Document | Owner of all nodes in the document |
| <html> | Element Node |
| <head> | Element Node |
| <body> | Element Node |
| <a> | Element Node |
| href | Attribute Node |
| <h1> | Element Node |
| My Header | Text Node |
Accessing HTML Elements
The HTML DOM can be used to access HTML elements.
The most common way to access an HTML element is to use the id of the element:
Example
<html>
<body>
<p id="demo"></p>
<script>
// Access a paragraph Element
const myPara = document.getElementById("demo");
// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>
</body>
</html>Live preview
In the example above, the getElementById method used id="demo" to find the element.
- id="demo" is an HTML property
- getElementById() is a DOM Method
- innerHTML is a DOM Property
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 add and delete HTML elements
- How to react to events in from HTML elements
The World Wide Web Consortium
The DOM is a W3C Standard (World Wide Web Consortium):
"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
The HTML DOM is a language independent standard developed by the W3C and WHATWG.