1
00:00:09,230 --> 00:00:09,950
Hey, everyone.

2
00:00:10,040 --> 00:00:10,910
Welcome back.

3
00:00:11,210 --> 00:00:13,700
So far, we wrote a few statements.

4
00:00:14,030 --> 00:00:17,090
We talked a little bit about JavaScript syntax.

5
00:00:17,350 --> 00:00:22,310
And now we just want to start interacting with the elements of our page.

6
00:00:22,460 --> 00:00:28,760
Because to do what I showed you in the first video, opening and closing menus, navigating through

7
00:00:28,760 --> 00:00:33,020
photos, sliders, expanding and collapsing sections.

8
00:00:33,260 --> 00:00:37,560
We're going to have to be able to select and change age out elements.

9
00:00:37,910 --> 00:00:45,590
So in order to do this, it's important to understand what is the DOM, which stands for Document Object

10
00:00:45,650 --> 00:00:46,250
Model.

11
00:00:46,400 --> 00:00:51,980
So this is an object created by the Web browser as soon as the page is loaded.

12
00:00:52,430 --> 00:01:00,670
So this object is going to contain all the nodes of our ASTM out page, which are the HCM out elements.

13
00:01:01,160 --> 00:01:03,770
So I'm providing your a simple example.

14
00:01:03,980 --> 00:01:06,620
Let's say we have this super simple Web page.

15
00:01:06,950 --> 00:01:10,170
So we have the had element inside the body.

16
00:01:10,230 --> 00:01:13,340
We just have an age one and a link.

17
00:01:13,610 --> 00:01:19,900
When the page is loaded by the browser, the browser is going to generate this DOM tree.

18
00:01:20,090 --> 00:01:22,580
So we can see that at the top of this tree.

19
00:01:22,610 --> 00:01:25,070
We have the document object.

20
00:01:25,220 --> 00:01:28,520
And then right below it, we have all the elements.

21
00:01:28,550 --> 00:01:36,590
So here we have the ASTM out element had body and everything that's inside these elements.

22
00:01:36,860 --> 00:01:43,910
So we are going to be able to select and change any element in our page down here.

23
00:01:43,940 --> 00:01:48,490
I've included a few more examples of what we can do with the DOM.

24
00:01:48,740 --> 00:01:51,520
So add change and remove HDMI.

25
00:01:51,520 --> 00:01:59,420
All elements change attributes of H, the Amelle elements like the class or the source of an image.

26
00:01:59,690 --> 00:02:07,100
So if you think about a photo slider, the way we change that image is just by changing the source of

27
00:02:07,100 --> 00:02:07,910
the image.

28
00:02:08,090 --> 00:02:15,290
We'll be able to change the CSX and we are going to react upon page events, which is really cool.

29
00:02:15,320 --> 00:02:22,550
So instead of just writing some isolated JavaScript code that runs on page load, we are going to write

30
00:02:22,550 --> 00:02:27,290
functions that are going to be executed when the user does something.

31
00:02:27,320 --> 00:02:33,770
So if the user clicks the arrow pointing to the right, then we are going to change the image.

32
00:02:34,100 --> 00:02:39,950
If the user clicks on the plus icon, we're going to expand that section.

33
00:02:40,580 --> 00:02:44,870
So this is what is going to make our page fully interactive.

34
00:02:45,500 --> 00:02:51,920
So now that we know what is the DOM in the next video, we are going to use it to start working with

35
00:02:51,920 --> 00:02:53,660
the ASTM out elements.

36
00:02:53,900 --> 00:02:55,170
I'll see you in the next video.