An important concept to understand before moving into javascript and J.
Query is the Document Object Model or the deal m
the deal M is best defined as a tree of objects created by your web browser.
When the Web page loads your web browser uses the DOMA to interpret that page and display its contents
let's take a look at the model illustrated as a flowchart at the top of the model hierarchy.
We have our actual H team l document for example index dot HMO or main dot HMO.
Whatever the case may be inside our HMO document we have our root element which is the HMO open tag
inside the root element.
We have several other elements.
For example the head tag entitled type the root element also holds the body element which can contain
links paragraphs headings divs and just about any other element we can use to develop the content of
our page.
Each of these elements can have text content and attributes.
For example the element contains an H R F attribute which contains a textual link.
The DOMA is important to understand because it allows the elements on a web page to be dynamically changed
or updated using JavaScript or the J query library.
This means we can change HMO elements attributes and CSF styles when different events are triggered.
For example if a button is clicked or a page is loaded just 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 each one tags to read.
In this case we would specify the h1 tags in our javascript if we wanted to change a specific element.
We can refer to it using an I.D..
For example we can assign the idea equals text to a paragraph element.
So p i d equals text we can then modify the element or any of its attributes using JavaScript.
Thirdly in similar to the idea method we can also refer to an element by assigning it a class.
For example if we wanted to modify a list element a specific list element we could attach the class
bullet one for example then we could change it using JavaScript as well.
In the next lesson we'll take a look at a few examples of how we can change elements inside the document
object model.