Skip to content

Document Object Model (DOM)

Manipulating DOM objects

What is the DOM?

  • DOM stands for Document Object Model

  • The DOM is a programming interface for HTML and XML

  • The DOM represents the structure of a document in memory

  • The DOM is an object-oriented representation of the web page

  • The DOM lets other programming languages manipulate the document

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

The DOM's content tree

1
2
3
4
5
6
7
8
9
<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
</body>
</html>

When a browser such as Chrome or Firefox parses an HTML document, it builds a content tree and then uses it to display the document.

https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core

Accessing the Document

In JavaScript, the Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.

Access the document object and its properties from the Chrome DevTools.

1
2
3
4
5
document;
document.location; // Read-only, Location object (info about current URL).
document.location = "https://heig-vd.ch/"; // Setter to update displayed URL.
document.designMode = "on"; // Lets user interactively modify page content.
document.referrer; // URI of page that linked to this page.

https://developer.mozilla.org/en-US/docs/Web/API/Document

Accessing the Elements of the DOM

The Element interface represents the HTML elements loaded in the DOM tree.

1
2
3
console.log(document.getElementById("id"));
console.log(document.getElementsByClassName("slide"));
console.log(document.getElementsByTagName("h1"));

CSS Selectors can also be used to query elements.

1
2
console.log(document.querySelector("ul > li")); // selects the first matching element
console.log(document.querySelectorAll("ul > li")); // selects all matching elements

Elements can then be modified in JavaScript.

1
2
3
4
5
6
7
8
9
document.getElementsByClassName("slide")
    .forEach(el => el.style = "background-color: blue");

let element = document.getElementById("my-icon");
element.innerHTML = "<p>Hello, World!</p>";
element.setAttribute("href", "https://www.heig-vd.ch/");
element.className;
element.classList;
element.children;

https://developer.mozilla.org/en-US/docs/Web/API/Element

Listening to DOM Events

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about what happened.

1
2
document.onkeydown = function(event) {console.log(event);}
document.addEventListener('keydown', event => console.log(event))

Important DOM events include load, click, mouseenter, etc.

1
element.addEventListener('mouseenter', event => doSomething());

The propagation of an event in the DOM can be stopped programatically.

1
event.stopPropagation();

Event handlers can also be registered from the HTML.

1
<a href="http://www.heig-vd.ch" onclick="event.stopPropagation();">

https://developer.mozilla.org/en-US/docs/Web/Events