1
00:00:01,570 --> 00:00:02,050
Dom.

2
00:00:02,980 --> 00:00:12,550
Dumb stands for document object model, so it's a programming interface for HTML documents, so we can

3
00:00:12,550 --> 00:00:19,690
say it provides an API for programming languages to change the document structure, style and content.

4
00:00:20,690 --> 00:00:24,770
And what I mean by document is a Web page.

5
00:00:25,680 --> 00:00:32,790
So Web page is a document which can be viewed in a browser, and this is how it's usually done or as

6
00:00:32,910 --> 00:00:35,400
the HTML source document as well.

7
00:00:35,940 --> 00:00:41,940
So Dom treats each HTML elements in a document and the document itself is objects.

8
00:00:42,360 --> 00:00:45,210
Then it creates a logical tree for this document.

9
00:00:46,530 --> 00:00:52,420
So let's go back to the sample page and view the Dom tree, so here's our sample page.

10
00:00:52,440 --> 00:00:59,010
It's pretty simple and it's displayed like this now, sort of view the dumb tree and other features.

11
00:00:59,010 --> 00:01:02,070
We need to use the web developer tool.

12
00:01:03,010 --> 00:01:12,310
So I can also open it by pressing control shift I so this is the developer tool interface now under

13
00:01:12,310 --> 00:01:15,820
the inspector tab you can view current Doomtree.

14
00:01:16,730 --> 00:01:22,670
And every element in an e-mail document such as tables, headers, text and and even the document itself

15
00:01:22,670 --> 00:01:29,150
is defined as an object for Dom and they are represented hierarchically in the Dom tree.

16
00:01:30,120 --> 00:01:35,310
So look at this by clicking this little icon here on the upper left hand corner, an element Werdum

17
00:01:35,310 --> 00:01:38,100
object can be directly inspected.

18
00:01:39,000 --> 00:01:42,120
And there is an image object here.

19
00:01:43,230 --> 00:01:45,060
So already it has a source attribute.

20
00:01:46,550 --> 00:01:52,610
But with this in line JavaScript, the source will be changed when the user clicks on the image.

21
00:01:53,660 --> 00:02:00,530
Also under the dome tab, we can observe the property's methods and their current values, as you can

22
00:02:00,530 --> 00:02:03,690
see, the list is going down way below when you scroll down.

23
00:02:04,310 --> 00:02:10,160
And by using the dome methods and properties, you can add, delete or change any element in an HTML

24
00:02:10,160 --> 00:02:10,640
document.

25
00:02:11,490 --> 00:02:15,930
So it's close the developer tool and view the page source.

26
00:02:18,200 --> 00:02:19,370
Scroll down a little bit.

27
00:02:20,840 --> 00:02:23,220
And here's the image that we're looking for.

28
00:02:23,840 --> 00:02:31,010
See the value of sauce attribute Inspector Dot Panji and the JavaScript code that will run when the

29
00:02:31,010 --> 00:02:31,810
user clicks on it.

30
00:02:33,260 --> 00:02:40,280
So you can manipulate the DOM with scripting languages such as JavaScript now for Web development purposes,

31
00:02:40,280 --> 00:02:48,110
generally JavaScript is used, the DOM can also be built for any language such as Python and many other

32
00:02:48,110 --> 00:02:49,190
scripting languages.

33
00:02:50,360 --> 00:02:57,410
And that's the most important part of doing so now is close up this tab and click on the image.

34
00:02:58,420 --> 00:03:05,890
And it has changed, so this means that we change the value of the source attribute.

35
00:03:07,010 --> 00:03:08,810
Some analysts view the page source again.

36
00:03:10,920 --> 00:03:14,730
And I think you see what I see, there is no change.

37
00:03:15,060 --> 00:03:15,990
It's still the same.

38
00:03:17,310 --> 00:03:22,770
So then let's close the tab and return to the page, open the developer tool by pressing the shortcut,

39
00:03:22,770 --> 00:03:26,430
control shiti and inspect the image element.

40
00:03:27,920 --> 00:03:31,100
As you can see, we can observe the change here in the dome.

41
00:03:32,490 --> 00:03:40,770
So an important thing here to stress is that the original HTML source document is not always exactly

42
00:03:40,770 --> 00:03:48,240
the same as the DOM tree because you can use JavaScript to change anything in the source.

43
00:03:49,070 --> 00:03:55,280
Now, another important feature of dumb is when there is something wrong, something not valid in the

44
00:03:55,460 --> 00:03:59,540
HTML document dump can also validate the document.

45
00:04:00,550 --> 00:04:05,350
Although it's an important topic, I really think that that's pretty much a tough talk about it.

46
00:04:05,920 --> 00:04:06,850
Let's move on, shall we?