top of page

The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

 

The HTML DOM Tree of Objects

 

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  • JavaScript can change all the HTML elements in the page

  • JavaScript can change all the HTML attributes in the page

  • JavaScript can change all the CSS styles in the page

  • JavaScript can remove existing HTML elements and attributes

  • JavaScript can add new HTML elements and attributes

  • JavaScript can react to all existing HTML events in the page

  • JavaScript can create new HTML events in the page

What You Will Learn

In the next chapters of this tutorial you will learn:

  • How to change the content of HTML elements

  • How to change the style (CSS) of HTML elements

  • How to react to HTML DOM events

  • How to add and delete HTML elements

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:

  • Core DOM - standard model for all document types

  • XML DOM - standard model for XML documents

  • HTML DOM - standard model for HTML documents

DOM

Document Object Model

bottom of page