The DOM   Objects, Properties, Methods

This time we are providing you with a chapter from the book Head First HTML5 Programming. The chapter is accessible only within the Wellesley network (or with the password you know if you're not in campus).
For the moment, you can skip certain sections which we will cover later in the semester: Doing things over and over ... (pages 46-51), as well as Arrays (pages 67-82).

What is an object?

So far, we have discussed three different kinds of values that are used in our Javascript programs: numbers (for example: 0, -34.5, 2789, etc.), strings (for example: "Harry", 'my message is: ', etc.) and booleans (true and false). These are also known as primitive data types, since they are already built-in in the language and we simply use them without any declaration of what they are.

However, writing programs with only three data types is limiting. The information around us is much more complex and we want a way to represent such complex information inside our programs as well. To this purpose, many programming languages offer a construct knwon as objects.

An object is a kind of value (also known as a data type) that has two important characteristics:

  • state, which is given by what JavaScript calls properties.
  • behaviors, which are specified by what JavaScript calls methods.

Both properties and methods are selected from an object using dot notation. As it turns out, in Javascript, everything is an object: variables and functions. In fact, all the primitive data types we have seen so far: numbers, strings, and booleans are objects too. As you might remember, we have already encountered examples of string values as an object:

  • name.length - where length is a property for the string object.
  • var pi = 3.1415926; alert(pi.toFixed(2)) - where toFixed() is a method for numbers that we have used to round up to 2 digits after the decimal point.
  • var phrase = "CS110 rocks!"; phrase.indexOf("110") - where indexOf() is a method for the string object, to find the starting index of the substring "110" in the string "CS110 rocks!" (can you guess the result)?

In these examples, the variables are on the left side of the dot, while on the right are the expressions we want to evaluate. Concretely, we are interested in the length of the value stored in the variable name; in the PI value with only two digits after the comma; or in the value that represents the index of the given substring ("110") in the string "CS110 rocks!".

We distinguish between properties and methods based on their syntax. Properties look like variables, while methods look like functions. They have parentheses and most of the time an argument (a value) inside them.

It is easy to find out what the names of properties and methods for an object are. You can use the Console to look them up. Create a variable with a value, then type its name and the dot operator. You will see a drop-down menu that lists every property and method name that applies to that object. See image below for an example.

The list of properties and methods for a variable of type string, which is also an object.

A few notes about this list of properties and methods. First, it contains many more that you will never need to use or know. For example, simply ignore everything that starts with __ (double underscore). Second, this list doesn't distinguish between properties and methods. In that case, you simply try something out (without parenthesis) and check whether you get a value back or a piece of code starting with the word function.

The DOM

The Document Object Model (DOM) is the programming interface (API) to represent and interact with an HTML (or XML) document.

The DOM respresents the HTML document as a tree of nodes. Every node represents a portion of the document. Explore below an example of how a simple HTML file is represented by its DOM.

<!doctype html>
<html lang="en">
<head>
  <title>My blog</title>
  <meta charset="utf-8">
  <script src="blog.js"></script>
</head>
<body>
  <h1>My blog</h1>
  <div id="entry1">
    <h2>Great day bird watching</h2>
    <p>
      Today I saw three ducks!
      I named them
      Huey, Louie, and Dewey.
    </p>
    <p>
      I took a couple of photos ...
    </p>
  </div>
</body>
</html>
Graphical representation of the DOM for the listed HTML example above. Image from the chapter of your reading.

Important Note

The DOM represents both the structure and the content of the HTML page. All elements of the structure (i.e., tags) are represented by nodes sorrounding with a border in the tree. In the Javascript representation they are all objects. The content of these objects is shown in the graphical representation without a border, and it's accessed by properties of the objects that contain them. You remember properties such as innerHTML or value (for input fields in the form).

Out of all the objects in this tree, only one of them can be referred within the Javascript code with its name, the document. The image on the left below shows how trying to access other objects fails. However, through the document object we can refer to the other objects, as its properties. The image on the right below shows several examples. Unfortunately, only elements that are unique such as <head> and <body> are directly accessible, for all the others we will need to use methods that access them. Additionally, notice that the other properties styles, forms, and are in plural (and the value is an array), since there can be many of them in a document.

On the left: only the name document is recognized as a variable. On the right: accessing other elements as properties of document.

We have previously mentioned several methods for accessing the other nodes of the tree: document.getElementById, document.getElementsByTagName, etc. However, the most universal one, that can be used to access every element through the use of selector strings is document.querySelector.

The query--the string that we pass as an argument to the method--corresponds to the CSS selectors that we will use in the CSS file to style that element (hence the name of the method). Therefore, all selectors that are known and used in CSS can be used as argument values for document.querySelector.

Let's try this interactively. Open this example and in the Console, try the following expressions:

Examples of using different query phrases with document.querySelector.

Notice that all expressions evaluate into an object value. To see that, store one of expression in a variable, for example: var h1 = document.querySelector("h1");, and then in the console type the name h1. with the dot. Notice how you get to see the list of all properties and methods of this object? This is the reason why trying to assign a value to such a variable will not change their text in the HTML file. The only thing it will do is to assign to the variable a new value. You will always need to access the object's properties in order to change things. Thus, you would have to say h1.innerHTML to change its text value, or h1.style.propertyName to change some style property of the element.