1
00:00:00,450 --> 00:00:04,380
An important concept to understand before moving into javascript and J.

2
00:00:04,380 --> 00:00:08,610
Query is the Document Object Model or the deal m

3
00:00:12,720 --> 00:00:17,980
the deal M is best defined as a tree of objects created by your web browser.

4
00:00:18,090 --> 00:00:25,860
When the Web page loads your web browser uses the DOMA to interpret that page and display its contents

5
00:00:27,610 --> 00:00:33,770
let's take a look at the model illustrated as a flowchart at the top of the model hierarchy.

6
00:00:33,790 --> 00:00:40,790
We have our actual H team l document for example index dot HMO or main dot HMO.

7
00:00:40,900 --> 00:00:50,180
Whatever the case may be inside our HMO document we have our root element which is the HMO open tag

8
00:00:51,620 --> 00:00:53,000
inside the root element.

9
00:00:53,000 --> 00:00:54,790
We have several other elements.

10
00:00:54,890 --> 00:01:03,190
For example the head tag entitled type the root element also holds the body element which can contain

11
00:01:03,190 --> 00:01:10,630
links paragraphs headings divs and just about any other element we can use to develop the content of

12
00:01:10,630 --> 00:01:13,870
our page.

13
00:01:13,990 --> 00:01:18,150
Each of these elements can have text content and attributes.

14
00:01:18,250 --> 00:01:26,190
For example the element contains an H R F attribute which contains a textual link.

15
00:01:29,560 --> 00:01:36,160
The DOMA is important to understand because it allows the elements on a web page to be dynamically changed

16
00:01:36,280 --> 00:01:44,140
or updated using JavaScript or the J query library.

17
00:01:44,140 --> 00:01:52,000
This means we can change HMO elements attributes and CSF styles when different events are triggered.

18
00:01:52,000 --> 00:01:56,770
For example if a button is clicked or a page is loaded just to name a few

19
00:01:59,730 --> 00:02:06,180
we can specify which elements to update or change on an event using three methods.

20
00:02:06,230 --> 00:02:09,140
First we can use the tag name.

21
00:02:09,140 --> 00:02:15,310
Say for example we wanted to change all the text contained within each one tags to read.

22
00:02:15,320 --> 00:02:23,220
In this case we would specify the h1 tags in our javascript if we wanted to change a specific element.

23
00:02:23,220 --> 00:02:25,790
We can refer to it using an I.D..

24
00:02:25,950 --> 00:02:33,070
For example we can assign the idea equals text to a paragraph element.

25
00:02:33,390 --> 00:02:43,040
So p i d equals text we can then modify the element or any of its attributes using JavaScript.

26
00:02:43,210 --> 00:02:50,170
Thirdly in similar to the idea method we can also refer to an element by assigning it a class.

27
00:02:50,170 --> 00:02:56,920
For example if we wanted to modify a list element a specific list element we could attach the class

28
00:02:57,460 --> 00:03:02,850
bullet one for example then we could change it using JavaScript as well.

29
00:03:04,070 --> 00:03:10,050
In the next lesson we'll take a look at a few examples of how we can change elements inside the document

30
00:03:10,080 --> 00:03:10,890
object model.