The DOM is best defined as a tree of objects created by your web browser, when the web page loads. Your web browser uses the DOM to interpret the page and display its contents.
Let's take a look at the model, illustrated as a flow chart.
At the top of the model hierarchy we have our HTML document. For example, index.html, main.html, etc.
Inside our html document we have our root element, the
Inside the root element we have several other elements. For example, the
The root element also holds the
<body> element which can contain links, paragraphs, headings, divs and just about any other element we use to develop the content of our pages.
Each of these elements can have text content and attributes.
For example, an
<a> element contains an href attribute which contains a textual link.
This means we can we can change HTML elements, attributes, and CSS Styles when different events are triggered. For example if a button is clicked, or a page is loaded - to name a few.
We can specify which elements to update or change on an event using three methods.
First, we can use the tag name.
Say for example we wanted to change all the text contained within
<h1> tags to red. In this case we would specify the
If we wanted to change a specific element, we can refer to it using an id.
For example, we can assign id="text" to a paragraph element
Thirdly, and similar to the id method we can also refer to an element by assigning it a class.