The Document Object Model (DOM)

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

html
head
meta
title
link
body
header
nav
main
section
footer
1.0 | The 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...

The document and it's properties

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

Let's have a look at some of the properties attached to the document object:

Exploratory assignment 2

  • Go back to the website from before and open up the console.
  • Type in the following lines of code in the console (press enter at line break):
document.title;
document.doctype;
document.head;
document.body;
document.all;
document.all[5];
1.0 | Document properties
  • What information do we get from accessing the properties?

Accessing the elements on the page - part 1

With JavaScript we can...

  • ... change all HTML elements and attributes
  • ... remove all HTML elements and attributes
  • ... add new HTML elements and attributes
  • ... style HTML elements

But how?

The .getElementById() method

To access a single element on the page, we may use the .getElementByID() method:

example.html

<body>
<h1 id="mainHeading">Min overskrift</h1>
<script src="js/script.js"></script>
</body>
1.1 | Part of HTML document

script.js

let h1 = document.getElementById("mainHeading");
console.log(h1);
1.2 | Using the .getElementById() method to access an element

To use the .getElementById() method, the element that we want to access needs to have an id.

In the example above, we use the document object along with the .getElementById() method to access the element on our page with the id of mainHeading.

The id is written inside the parentheses of the method and in quotation marks (either single or double)

The .innerHTML property

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

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

Notice that in this example, instead of typing the whole thing (document.getElementById("mainHeading").innerHTML) just use the name of the variable we used to store the element (h1) and then read the .innerHTML property.

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:

h1.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 actually changing the content on the page.

The .style property

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

script.js

h1.style.color = "white";
h1.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.

Assignment

  • Add an element to the HTML document, e.g. a paragraph (p) and give it an id.
  • Use JavaScript to access and change the style instructions of the element.
  • Try changing other CSS properties than the ones used in the previous example - you can e.g. try to change the text-align, border-left or font-family properties.

.[attribut]

As mentioned in the beginning of this course, we may use JavaScript to change the value of attributes which is what we did in the previous example - adding inline style instructions to our element. Another thing that we can do is changing the source code - or path - of an image so that a different image is shown:

example.html

<body>
<h1 id="mainHeading">Min overskrift</h1>
<img id="myImage" src="img/img1.jpg" alt="A random image">
<script src="js/script.js"></script>
</body>
1.6 | Part of an HTML document

script.js

let image = document.getElementById("myImage");
image.src = "img/img2.jpg";
1.7 | Changing attribute values

Assignment

  • HTML: Add an image to your page and give it an id
  • JS: Use the document.getElementById() method to access the element and store it in a variable
  • JS: Create a function that changes the src value of the image, making it a different image.
  • JS: Still inside the function, use the .style property to change the CSS property border-radius of the image.
  • JS: Call the function and see if the image and border-radius of the image changes.

The .querySelector() method

Instead of using the .getElementById() method, we may also use the .querySelector() method:

example.js

let body = document.querySelector("body");
1.9 | Using the .querySelector method

By using the .querySelector() method, we cannot only access the elements that has id attribute, but practically every element on the page. In the example above, we use it to access the body element.

We can also use the .querySelector() method to access an element that has a specific id:

let h1 = document.querySelector("#myHeading");
2.0 | Using the .querySelector() method

... or a specific class:

let para = document.querySelector(".myParagraph")
2.1 | Using the .querySelector method

Notice that id's are written with a # and classes with a .. Also be aware that this method will only return the first element that fits - e.g. if there are multiple elements that has the same class, it will only access the first.

Parents, siblings and children

When we have accessed an element, we can use it to "visit" it's parents, siblings and children:

[element].parentElement;
[element].previousElementSibling;
[element].nextElementSibling;
[element].firstElementChild;
[element].lastElementChild;
1.8 | Parents, siblings and children

The first property (.parentElement) is used to access the parent element of our element.

The second one (.previousElementSibling) is used to access the "elder" sibling of our element.

The third one (.nextElementSibling) is used to access the "younger" sibling of our element.

The fourth one (.firstElementChild) is used to access the first child element of our element.

The fifth one (.lastElementChild) is used to access the last child element of our element.

We can of course only access these elements if they exist.