The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates the document object model of the page.
HTML DOM The model is structured as a tree of objects :
The HTML DOM Tree of Objects
What You Will Learn
In order to do this, you must first find the element. There are three ways to do this:
- Find HTML elements by id
- Finding HTML elements by tag name
- Finding HTML elements by class name
What is the HTML DOM?
In the rest of this tutorial, you will learn:
- How to change the content of an HTML element (innerHTML)
- How to change the style (HTML) of HTML elements
- How to react to HTML DOM events
- How to add or remove HTML elements
Find HTML elements by id
The easiest way to find HTML elements in the DOM is by using the element's id.
This example looks for the id = "intro" element:
Find HTML elements by tag name
This example finds elements with id = "main" and then finds all elements in id = "main" <p> element：
Finding HTML elements by class name
This example uses the getElementsByClassName function to find elements of class = "intro" :