bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/JavaScript/DOM and Browser APIs
JavaScript•DOM and Browser APIs

The HTML DOM

Concept visual

The HTML DOM

Graph traversalgraph
ABCDE
current
queued
1
4

Start from A

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

Formula

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> 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

Next

HTML DOM API