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