Lesson 3.7. Document Object Model (DOM)

Lesson 3.6 Summary Lesson 3.8

In the previous course, we have studied studied the events in the attributes of HTML tags. You will understand quite easily that this method has some limitations. For example, you will not be able to modify another element than the one that triggers the event because this refers to the current element.

In this course, we will study another method that allows you to modify any element of the page. In the example below, the button allows you to change the title, although it is two separate HTML tags (<h1> and <botton>).

Try online

DOM

To interact with any HTML tag, it is first necessary to understand how the document (Document Object Model or DOM) is is structured . The DOM is a representation of the HTML document with which JavaScript can interact.

Graphical representation of the DOM

The DOM is a hierarchical representation of HTML. The hierarchy is related to the structure of HTML where tags are nested within each other. In example above, the <h1> tag is inside the <body> tag. We say that:

Modifying a DOM element

You can modify any DOM element in JavaScript. To do so, you must first retrieve the JavaScript object associated with the tag you want to modify. Here is an example that allows you to retrieve the object associated with the tag identifyed by id="myIdentifier". Remember that identifiers must be unique (two tags must never have the same identifier).

<div id="myID">Bla bla </div>

<script>
  let element = document.getElementById('myID');
</script>

Let's analyze this code:

It is then possible to modify the element straight away. As we have already done in the previous lesson. For example:

// Change the text in the element
element.innerText = 'New content';

Example

The example below adds the title text to the <h1> tag of the page:

<!-- Empty title -->
<h1 id="title"></h1>

<script>
  let element = document.getElementById('title');
  element.innerText = "Title updated!"
</script>
Try online

The above example may seem useless to you! It is indeed simpler to put the title directly in the <h1> tag of the HTML. However, the example below should help you understand why this mechanism is important. This example allows you to change the title when you click on the button which are two different tags:

<h1 id="title">Document Object Model</h1>

<button onclick="document.getElementById('title').innerText = 'New title';">
    Click here to change the title
</button>
Try online

Exercises

Exercise 1

Change the code below so that the text in the paragraph is replaced by Chuck Norris is too strong when the button is clicked:

<p>
    Chuck Norris is <span style="font-weight: bold;" id="qualificatif">a loser</span>.
</p>

<button>
    I don't want to die so young.
</button>

Here is the expected result

Do the exercise online
Solution

Exercise 2

Modify the code below so that the answer is displayed or deleted according to the clicked button:

<h1>What is Microsoft Edge used for?</h1>

<!-- Add events that show or hide the response -->
<button>Show the answer</button>
<button>Hide the anwser</button>

<!-- The answer is "To download Google Chrome" -->
<p id="reponse"></p>

Here is the expected result:

Faire l'exercice en ligne
Solution

Quiz

What is the DOM?

Check Bravo! The DOM (Document Object Model) is a representation of the HTML document. Try again...

What does the code below do?

<h1>Tilte</h1>
<script>
  document.getElementById('title').innerText = 'New title';
</script>
Check Bravo ! The identifier title does not exist in the DOM. Try again...

Let's consider the HTML code below, which statements are true?

<html>
  <head>

  </head>
  <body>
    <h1>Hierarchy</h1>
  </body>
</html>
Check Bravo! The tags that are encapsulated in other tags are their descendants. Try again...
Lesson 3.6 Summary Lesson 3.8

See also

Last update : 10/07/2022
 Soutenez le blog de Lulu sur Tipee. Support Lulu's blog on Tipeee