The Document Object Model

PreviousDescription and basic syntax NextExtra Resources

Last updated 1 year ago

Was this helpful?

The Document Object Model

The Document Object Model (DOM) provides a programmatic API for controlling the browser and accessing the contents of the web page. In other words, the DOM connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually, that means JavaScript, although modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language, as such.

The browser provides the following APIs:

DOM Core - finding and setting values of elements on the page
DOM Event Model - handling events that dispatch from the page
DOM Style Model - modify styles associated with elements
DOM Traversal Model and Range Models - traversing elements on a page and editing multiple elements at once
DOM HTML API - defines objects and methods representing each type of element
DOM Validation API - methods to dynamically check if documents are valid against the specs

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements).

HTML DOM properties are values (of HTML Elements) that you can set or change.

<html>
    <body>

        <p id="demo"></p>

        <script>
            document.getElementById("demo").innerHTML = "Hello World!";
            //getElementById is a method to change any HTML element
            //innerHTML is a property
            // "Hello World!" is the value
        </script>

    </body>
</html>

Finding HTML Elements

Finding HTML elements by id
Finding HTML elements by tag name. The result is an array of elements
Finding HTML elements by class name. The result is an array of elements
Finding HTML elements by CSS selectors

document.getElementsByTagName("p")[0].innerHTML = "I've changed the 1st paragraf";
document.getElementsByTagName("p")[1].style.color= "red"

var x = document.querySelectorAll("p.intro");
// note x is an array, even if only one element matches the query

// Get the first element with the ID "my-id"
const el = document.querySelector("#my-id");

Changing CSS properties

<!DOCTYPE html>
<html>
  <body>
    <h1 id="id1">My Heading 1</h1>

    <button
      type="button"
      onclick="document.getElementById('id1').style.color = 'red'">
      Click Me!
    </button>
  </body>
</html>

Handling events

Examples of HTML events:

When a user clicks the mouse
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
When a user strokes a key

document.getElementById("myBtn").onclick = displayDate;

Same output, but using JavaScript HTML DOM EventListener

document.getElementById("myBtn").addEventListener("click", displayDate);

function selectInputAndLogNewValue(inputId) {
  // Get the input element with the specified ID
  const input = document.querySelector(`#${inputId}`);

  // Add a change event listener to the input element
  input.addEventListener("change", function(e) {
    // Get the new value of the input element from the event object
    const newValue = e.target.value;

    // Log the new value to the console
    console.log(`New value of the input with the ID "${inputId}" is "${newValue}"`);
  });
}