Document Object Model | How a Web Browser Views the World

The web browser’s understanding of the world

Overview
Cheat sheet
How to use
Conclusions

Overview

The web browsers each create their own internal set of data that represent the contents of the current web page they are displaying.

As a convenience, the web browsers allow access to these internal values via a set of built-in automatically created JavaScript variables and functions. These are collectively referred to as the Document Object Model (DOM).

Using Javascript you can read from or write to these values to alter how the browser interprets the page.

Cheat sheet

Diagram

This diagram shows highlights of a contemporary browsers’ default DOM:

How to use the DOM

Concept

The DOM is easy to use in Javascript, once you understand its structure. The following examples should give you the idea.

Changing the title of a web page

The following Javascript code will change the title of a web page. Note how we navigate through the DOM by using the built-in variables that the browser has created for each element in the DOM.

window.document.title = "Herpetology and Other Amphibial Issues";

This instructs the Javascript code to do the following:

access the browser’s built-in ‘window’ object
access the ‘document’ child object therein
change the value of the ‘title’ property to be “Herpetology and Other Amphibial Issues”

Changing the title of a web page (continued)

Since everything in the DOM belongs to ‘window’, it is already assumed in code and you do not need to explicitly mention it.

So instead of window.document.title = "Herp...", we can more succinctly write:

document.title =  "Herpetology and Other Amphibial Issues";

Trigger the browser to go to the previous page in its history

Let’s say you want to trigger the browser to go back one page, like when a user hits the back button in the browser:

window.history.back();

And since everything in the DOM belongs to the ‘window’ variable, you actually don’t have to write it:

history.back();

Pop up an alert with a hard-coded message

If you want the page to pop up a modal dialog with a message to the user:

window.alert("Welcome to Herpetology and Other Amphibial Issues!");

And again, you don’t have to write ‘window’, since it’s always implied:

alert("Welcome to Herpetology and Other Amphibial Issues!");

Pop up an alert with the contents of an element

Let’s say you have the following element in your HTML code somewhere:

 <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1>

You can write code to scrape that text out of the HTML and do something with it in Javascript. For example, pop it up in a modal dialog:

let element = window.document.getElementById('my_heading'); // store the element object in a variable
alert(element.innerText); //pop up the text inside that element in a modal dialog

Pop up an alert with the contents of an element (continued)

Note that you will need to make sure that the previous Javascript code only runs after the browser has already loaded this HTML element into the DOM.

A simple solution is to place this Javascript below the HTML element it references in your code, since the browser generally parses the code from top-to-bottom:

    <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1>

    <script type="text/javascript">
        let element = window.document.getElementById('my_heading'); // store the element object in a variable
        alert(element.innerText); //pop up the text inside that element in a modal dialog
    </script>

Change the style of an element

Again, let’s say you have the following element in your HTML code somewhere:

 <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1>

You can write code to change the style of that. For example, let’s make the text in that heading blue:

let element = window.document.getElementById('my_heading'); // store the element object in a variable
element.style.color = 'blue'; //assign a new color to the color property

Change the style of an element (continued)

Like in the previous example, you will need to make sure that this Javascript code only runs after the browser has already stored this HTML element in memory. Again, a simple solution is to place this Javascript somewhere below the HTML element it references in your code, since the browser generally parses the code from top-to-bottom.

    <h1 id="my_heading">Welcome to Herpetology and Other Amphibial Issues!</h1>
    <script type="text/javascript">
        let element = window.document.getElementById('my_heading'); // store the element object in a variable
        element.style.color = 'blue'; //assign a new color to the color property
    </script>

Conclusions

Thank you. Bye.