Document Object Model

From Knowledge Kitchen
Jump to: navigation, search


Description

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

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

Browser dom cheat sheet.png


How to use the DOM in Javascript

The DOM is easy to use 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:

  • navigate into the 'window' object
  • navigate into the 'document' child object
  • change the value of the 'title' property to "Herpetology and Other Amphibial Issues"

Since everything in the DOM belongs to 'window', it is already assumed and you can actually not type it. This does the same thing:

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:

var 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

Note that you will need to make sure that this Javascript code only runs after the browser has already stored this HTML element in memory. 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. That way it is guaranteed that the browser will have parsed the HTML element before it parses your Javascript code.

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:

var 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

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. 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. That way it is guaranteed that the browser will have parsed the HTML element before it parses your Javascript code.


What links here