Document Object Model (DOM)

A Project Mammut game is effectively a fancy web page, and the DOM is how the browser represents that page before it gets drawn to the screen: a tree of elements that scripts can read and change while the game runs.

This is basically what the Scene Editor's tree view is showing.

Using it from a scene script

this.dom gives your scene script direct access to those elements: the scene's root (this.dom.root) and every node marked Referenceable, by node id. They're ordinary DOM elements, so the standard browser APIs all work on them, alongside the helpers Mammut adds such as hide(), show() and setState().

onStart() {
  this.dom.score_label.textContent = "Score: 0";
  this.dom.title.classList.add("glow");
  this.dom.start_button.addEventListener("click", () => {
    SceneManager.SwitchScene("level_1");
  });
},

See Coding for the helpers Mammut adds, and Script Types for how this.dom is typed. To look at the DOM of a running game, see Debugging.

Further reading

• Document Object Model (DOM) on MDN: what the DOM is and how scripts see a page as a tree of nodes.
• DOM scripting introduction on MDN: a beginner guide to finding, creating, moving and styling elements with JavaScript.
• Introduction to events on MDN: reacting to clicks, key presses and other input with addEventListener().
• Document on javascript.info: the DOM step by step, from the tree itself to attributes, styles, classes and coordinates, with exercises.
• Viewing and changing the DOM in Chrome DevTools: inspecting and editing elements on a live page.

Reference

• querySelector() on MDN: finding an element with a CSS selector.
• classList on MDN: adding, removing and toggling an element's CSS classes.
• addEventListener() on MDN: every option for listening to events.