Document Object Model

Lesson 2 of 13 in Coddy's JavaScript DOM Methods course.

The Document Object Model (DOM) is a hierarchical representation of an HTML document, allowing JavaScript to interact with and manipulate web page elements.

The DOM represents an HTML document as a tree of objects.
Each element in the HTML code corresponds to a node in the tree.
The document itself is the root node.
Different DOM methods allow you to access, create, and modify these nodes and their content. This lets you dynamically change the web page.

For example this code:

<html>
	<head>
		<title>My title</title>
	</head>
	<body>
		<h1>A heading</h1>
		<a href="#">Link text</a>
	</body>
</html>

Will be represented by the following DOM structure:

Let's dive deeper!

Try it yourself

This lesson doesn't include a code challenge.

All lessons in JavaScript DOM Methods

1Introduction

IntroductionDocument Object Model

2DOM Methods I

getElementById Modify Element Style getElementsByClassName Loop Through and Manipulate getElementsByTagName querySelector

3DOM Methods II

querySelectorAll addEventListener innerHTML createElement and appendChild classList toggle