7. The Document Object Model (DOM)

 

The document object model is the way that the browser stores the HTML page internally. The document is considered an object made of other objects that represent the components of the document. The reason it is important to understand the document object model is that you can write JavaScript code that makes change to the model. For example, the background-color is a property of a number of HTML elements including the body. The value of the background-color is stored as part of the document object model and therfor can be changed by JavaScript code so that it can be changed while to user is interacting with the page. Another example would be to change the text in a <p> tag to vary the output based on some condition.

 

In the previous section, we used the command document.write. Document refered to the document object that is described in more detail in this section. Write is called a method, which is an action that can be completed with an object. To use DOM terminology, we executed the write method on the document object in that example.

 

Within the overall document are all the HTML elements defined by the tags in the document. It might contain <p> tags or <h1> tags or any of the other tags. With the DOM, these elements can be changed by the JavaScript code. Since a document is likely to conatin more than one of a particular element, the elements need to be uniquly identified with an ID attribute before changeing them with JavaScript.

 

A an HTML <p> tag with its ID attribute saet to par1 is shown below. It should be noted that par1 is an arbitrary name chosen by the person writing the code.

 

<p id="par1">Some text for the screen.<p>

It would be nice if we could just use that name we assigned, par2, to reference that paragraph and make a change. However, the computer doesn't call it par one, it use an internal code for it. So to be able to make change to that paragraph, we need to ask the computer for the internal code and store it to a variable. This would be done in JavaScript with the following code.

 

The text that is written by an HTML element is stored in the innerHTML property of the element. Once you have the unique element as reference by the computer, then you can change its properties. The style properties of the element are all referenced using the style properties. The example below changes the text color nd the background color. Note that the style property in the object model may not be the same as in the CSS. For example, in CSS background-color is used and in the DOM backgroundcolor is used.

 

A list of all DOM element styles can be found at HTML DOM Style Object

 

<script>

   var x;

   x = document.getElementById("par1");

   x.innerHTML="New text to write in the paragraph.";

   x.style.color="Blue";

   x.style.backgroundcolor="Green";

</script>

The last section demonstrated how to change an element, but not when. Usually changes are made because of an event. An event is something that happens, usually caused by the user of the page clicking somewhere. So a common event is called OnClick. The OnClick event is triggered when a user click on an element. When the user clicks on an element, the browser looks to see if an JavaScript code was defined to execute when the click occurs.

 

Look at the next code sample. It defines a function, a button, and assigns the function to the onclick event of the button element. Not the a page could have any number of button and the onclick event could be used with other elements as well.

 

<!DOCTYPE html>

<html>

<head>

<script>

   function BlueButtonFunction() {

      x = document.getElementById("MainHeading");

      x.innerHTML = "New Heading Value";

      x.style.backgroundColor = "LightBlue";

      }

</script>

</head>

<body>

<h1 id="MainHeading">Initial Heading</h1>

<button onclick="BlueButtonFunction()">Make Blue</button>

</body>

</html>

Sample output would be:

 

Initial Heading

Make Blue

Back to Table of Contents