Lesson 16: DOM

HTML elements are the building blocks that make up the Document Object Model (DOM). In this section, we’ll look at what this map is and how you can interact with it.

What is the DOM?#

When a browser loads a webpage, it translates the HTML code into a tree map of the page. This map is called the Document Object Model, or DOM.

Every tag, attribute, and piece of text in your HTML is a branch or leaf on this tree. You can inspect this tree map using your browser’s element inspector tool.

What is the AOM?#

The browser also builds a second tree map for screen readers and accessibility tools. This is called the Accessibility Object Model, or AOM. It helps assistive technology understand the structure and meaning of your page.

Controlling elements with scripts#

Since the DOM represents your HTML as objects, you can use JavaScript to read or change them.

For example, you can query all the images on a page to read their alt descriptions. Or you can check a video player’s properties to see if it is currently playing.

const images = document.querySelectorAll("img");

This tells the browser to find all image tags on the page.

Element blueprints#

Every HTML tag has a corresponding blueprint in the browser. For example, a button uses a button blueprint, while a video uses a video blueprint.

These blueprints tell the browser what properties and actions the element supports. Some simple tags, like <section> or <address>, share a default blueprint because they don’t need any special features.

The Window and Document#

The document object represents the webpage itself. You can use it to search for tags or read page info like the last time the file was modified.

The window object represents the browser window or tab that holds the page. It lets you check the screen size or control the browser tab directly.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).