An Intro to the DOM and the Click Event

Go back to JavaScript Index

What is the DOM?

MDN describes the DOM as:

"... a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page."
- MDN contributors (2020) Introduction to the DOM [online] available from https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction [23 January 2020]

The DOM tree

When you inspect a page, the HTML is shown in a DOM tree that you can unfold to explore the different levels of the tree. It may look something like this:

html
head
meta
title
link
body
header
nav
main
section
footer
1.0 | An example of a DOM tree

Exploratory assignment 1

  • Go to a random website
  • Use inspect
  • Create a DOM tree for the page that shows at least 6 layers.
  • Keep the page open a little while longer...

An introduction to the Document Object

The document is an object, and each object can have some methods and properties attached.

One of the methods that is widely used, is the .getElementById() method which is used to access a specific element using it's id as selector.

Let's have a look at an example:

example.html

<body>
<h1 id="myHeading">My Heading</h1>
<script src="js/example.js"></script>
</body>
1.1 | Part of an HTML document

As you can see marked in the example above, the element has a unique id. We can use this id to access the element through JavaScript:

script.js

let myHeading = document.getElementById("myHeading");
1.2 | Using the .getElementById() method to access an element

document is the object that we accessing, meaning the content on the page, and when we have access to that, we look for a specific element within the page - the one with id="myHeading". Notice how the method is written in camelCase - it won't work if it's not written that way.

The id that we are looking for is written inside the parentheses of the method and in quotation marks (either single or double).

Once we have accessed the element, possibilities are nearly endless as we can...

  • ... change the HTML element and its attributes
  • ... remove the HTML element and its attributes
  • ... add new HTML elements and attributes
  • ... style the HTML element

Question #1

Are there any elements in the Light Bulb assignment that it would make sense to access and store this way? (Could be elements that we are interacting with or elements that we are changing in some way).

How would you access them?

Ok, so now that we have accessed the elements - how do we manipulate them?

The .innerHTML property

Once we have accessed the element, we may look at what's inside it by using the innerHTML property:

console.log(myHeading.innerHTML);
1.3 | the .innerHTML property

Notice that in this example, instead of typing the whole thing (document.getElementById("myHeading").innerHTML) we use the name of the variable that we created.

Doing it this way enables us to read the content of the element, but we can also change it by assigning a new value to it:

myHeading.innerHTML = "Hello Spring!";
1.4 | Changing the innerHTML of our element

In this example, we assign a new value to our element's innerHTML property; the string "Hello Spring!".

Notice that we're no longer just logging to the console, but that we're actually changing the content on the page.

Question #2

Are there any elements in the Light Bulb program whose innerHTML we are changing?

When and how do we change it/them? - is it based upon a condition or an action/event, or maybe both?

The .style property

We may also change the style instructions of the element, accessing the .style property:

script.js

myHeading.style.color = "white";
myHeading.style.backgroundColor = "black";
1.5 | Changing the style instructions of our element

Notice that the .style property is followed by the CSS property that we wish to change: In the first statement, we change the value of the color property to white, and in the second one we change the background-color property to black.

Be aware that CSS properties with a dash are written in camelCase and NOT with a dash! This goes for all CSS properties that contain a dash.

NB: If you inspect the element, you will notice that the style instructions are added to the element inline - and so we're not changing the actual CSS document this way, just overruling the style instructions in the stylesheet.

Question #3

Are there any elements whose style instructions we are changing in the Light Bulb program?

When and how? - is it based upon a condition or an action, or maybe both?

The JS Mouse Click Event

We now know how to access specific elements on the page and how to change them, but we still need to look into how to change them WHEN specific actions or events takes place. In this introduction course, we will have a look into one event that can trigger a response - or rather a function - being the mouse click event.

To trigger a function when a specific element is clicked, we add an event listener to the element:

example2.html

<body>
<h1 id="myHeading">My Heading</h1>
<button id="myButton">My Button</button>
<script src="js/example2.js"></script>
</body>
1.5 | Part of an HTML document

Just like the h1 heading in the previous example, our button has an id. We use this id to access the element, while storing it in a variable. We then attach an event listener to that variable:

script.js

let myButton = document.getElementById("myButton");
const changeContent = () => {
myButton.innerHTML = "Clicked";
}
myButton.addEventListener("click", changeContent);
1.6 | Adding an event listener to an element

In the example above, we grab the button element by using its id as selector. We then define a function that will change the innerHTML of that button from the original "My Button" to "Clicked", and lastly we add an event listener to the button that listens for a click and when a click occurs, triggers - or calls - the function changeContent.

Question #4

Are there any events in the Light Bulb program that will trigger a change on the page?

If so - see if you can add an event listener to the element or elements that trigger the change.

Assignment

Applying the same principles as in the Light Bulb program, see if you can program the "Like" program (wireframe on Canvas).

The goal is to create a program that will act exactly like the one designed in XD.