English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Document Object Model, usually referred to asDOM, which is an important part of making websites interactive.
Document Object ModelRepresents an HTML document displayed in a window.
It is an interface that allows JavaScript to handle the content, structure, and style of the website.
After loading the web page, the browser will create the HTML DOM (Document Object Model) of the page:Document Object Model.
HTML DOMtree constructed by the modelObjects.
The following example explains what DOM is:
<html> <head> <title>Example</title> </head> <h1>Example Page</h1> <p>This is an example page</p> </html>
The DOM representation of the above code is as follows:
HTML DOM is the standardObjectsModel andProgramming Interface. It defines:
HTML elements asObjects
of all HTML elementsProperties
to access all HTML elementsMethods
of all HTML elementsEvents
In other words:HTML DOM is the standard for how HTML elements are accessed, modified, added, or deleted.
Through the object model, JavaScript gains all the functions needed to create dynamic HTML:
JavaScript can change all HTML elements in the page
JavaScript can change all HTML attributes in the page
JavaScript can change all CSS styles in the page
JavaScript can delete existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can respond to all existing HTML events in the page
JavaScript can create new HTML events in the page
In the next chapter of this tutorial, you will learn:
How to Find HTML Elements
How to Change the Content of HTML Elements
How to Add and Remove HTML Elements
How to Change the Style (CSS) of HTML Elements
How to Add and Remove HTML Attributes
How to Browsing the DOM Tree