JavaScript HTML DOM
- Previous Page JS Async
- Next Page DOM Methods
Through HTML DOM, JavaScript can access and change all elements of the HTML document.
HTML DOM (Document Object Model)
When the web page is loaded, the browser will create the document object model (DOM) of the page (Document Object Model).
HTML DOM The model is structured asObject tree:
The HTML DOM tree of the object
Through this object model, JavaScript gains all the power 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 react to all existing HTML events in the page
- JavaScript can create new HTML events in the page
What will you learn
In the following 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 DOM?
DOM is a W3C (World Wide Web Consortium) standard.
DOM defines the 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, update the content, structure, and style of documents."
The W3C DOM standard is divided into 3 different parts:
- Core DOM - Standard Model for All Document Types
- XML DOM - Standard Model of XML Document
- HTML DOM - Standard Model of HTML Document
What is HTML DOM?
HTML DOM is a standard of HTMLObjectsandProgramming Interface. It defines:
- AsObjectsof the HTML elements
- All HTML elementsProperties
- Access all HTML elementsMethods
- All HTML elementsEvents
In other words: HTML DOM is a standard about how to get, change, add, or delete HTML elements.
- Previous Page JS Async
- Next Page DOM Methods
