Understanding the Document Object Model

In this lesson, you will learn briefly about the Document Object model – the data representation of the web elements that comprise the page. We will look at what is DOM and how programming languages interact with the DOM to select elements to create animation and effects.

In this article

What is DOM?

When a web page is being loaded as a result of a user request, it displays the content of that web page. But that’s not all that browser has to deal with. Web browsers create a representation or model of the tags, attributes, and content of the page, behind the scene. This representation of the page is called the Document Object Model, or DOM for short. The DOM represents the elements of the document as nodes of the tree-like structure.

The Document Object Model, or the DOM, is an object-oriented representation of the web elements of the page, which can be interacted, modified with a client-side scripting language, such as JavaScript or JQuery (JS library). It provides the information JS needs to interact with the elements on the web page through which it can be changed, add, or remove from the HTML on the page.

The DOM doesn’t belong to any programming language. It is a standard form web browser developers have adopted. If you are interested, you can read more about the W3C DOM from https://www.w3.org/DOM/.

How does DOM work?

To understand how the DOM works, take a look at a very simple example.

<!doctype html>
<html>
<head><title> Understanding DOM</title></head>
<body> <h1 id=”header”>Welcome</h1>
<p>Welcome to TutorialsPanel.com<p>
</body>
</html>

As you can see, some tags such as <html>, <head>, etc. are wrapping other tags like <body>, <title>, etc. Some content is also wrapped inside tags like <h1>, <p>. You can represent this relationship between tags using the tree-like structure. The <html> tag is the “root” of the tree – like the eldest member in the family while other tags represent branches and nodes of the family trees. While <head> and <body> tags contain further tags, but there is no tag after <p> tag.

DOM Tree

Accessing the DOM elements

JavaScript provides you several methods to access or select elements on a web page so you can interact or modify them – like fading them, showing them, or changing their background colors, etc.

Access elements by ID

The JavaScript lets you select an element with a particular ID using document.getElementById() function. So if there is a <div> tag with the ID “header” you can select the element as:

document.getElementById(“header”)

If you use the document.getElementByTagName(“div”) function, it will select every instance of the div tag which probably you don’t want to.

Access elements by Class Name

Now let’s say your web page contains div tags and few of these have class name ‘featured’ attached. The function document.getElementByClassName(‘featured’) will retrieve all div elements with this class name.

Access elements by CSS selectors

This is a more comprehensive way to select elements using any CSS selector. For example, to select only <div> tags with the ‘featured’ class, you can write the following:

document.querySelectorAll(‘div.featured’)

You will learn more about the selection of elements in depth in the next lesson.

Getting Started with jQuery	Tutorial Home	jQuery Selecting Elements