Submodule 14.1: Introduction to DOM

DOM definition

DOM (Document Object Model) is a tree-like representation of the HTML structure of Web pages. All objects of an HTML page are included and can be manipulated by the DOM.

By manipulation, we mean that we change the content ( eg add/delete HTML ), the structure ( move an HTML element to another place) and their appearance ( change their style).

To get a sense of the DOM structure copy the below code and paste it on the "Markup to test" field of the Live DOM Viewer webpage.

View source:

You can also see the DOM of a page in the console - elements and inspect these with the appropriate tool.

Exercise

1. Open your editor, create a new file and save it as exersice14.1.1.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. Open the console to see the results.

Resources:

- What exactly is the DOM?

- What is the DOM?

Parents-Children-Siblings within the DOM

A very important concept of the DOM is that each object has information about the relationship between that object and the other objects of the page.

The relationships between the different objects (elements) of a page are:

Parents -> the tags that contain the element

Siblings -> other tags that have the same parent with them

Children -> tags that these elements contain

As we will see later, these relationships are the key to enable you to manipulate the DOM.

Nodes and Dom traversing

Every object on the DOM tree is a node and elements are a specific type of node.

There are 12 types of nodes which you can find here.

The ones that you will often encounter are: element, attribute and text.

Knowing the node type is essential to be able to determine which properties you can use.

In the below code you will see how you can determine the node type and also distinguish between the children and childnodes.

Only elements can have children, however, nodes can have childnodes. 

Code:

Exercise

1. Open your editor, create a new file and save it as exersice14.1.3.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. Open the console to see the results.

Answer:

4. 4.  Modify the above code to determine the console.log outputs of the ul tag.

Answer:

Two things to note from the above example. First, that the console returns us the number of the nodeType as it is determined on the w3schools link above. Also, although in this case <h1> doesn't have children, it has 1 childnode which is the text that it contains.

With the above knowledge, you are now ready to get a first idea of how we can access the different nodes, a process that is known as traversing the DOM. Visit the Walking the DOM page to understand the properties that link nodes to other nodes. 

Apply CSS rules to Nodes

As you already know, we can change the styles of the HTML elements using DOM.

In order to be able to change the style, you should first define the element to which you want to apply the new style (using for example getElementById) and then write .style.property. 

The general type to do that is: document.getElementById(id).style.property = new style

Additinaly, to apply styles to element's children the general type is: document.getElementById(id).children[x].style.property = new style

In the below code we will see some examples of changing the styles of element's children.

Code:

Exercise

1. Open your editor, create a new file and save it as exersice14.1.4.html in the folder "yourNameWEB2JS".
2. Copy the code below and paste it in the new file.
3. See the results.

Answer:

4. 4. Modify the above code to change the background of the third ul item to orange.

Answer: