WEBVTT 00:00.810 --> 00:07.500 It's time to actually start learning how to manipulate on a page or in other words, how to interact 00:07.500 --> 00:08.690 with elements. 00:09.330 --> 00:13.920 This is the case when we need to start learning what is a document object model. 00:14.940 --> 00:17.850 In most cases, document object model is simply Don. 00:18.970 --> 00:23.830 Don specifies how JavaScript can access and update the contents of a Web page. 00:24.730 --> 00:31.240 It is a cross platform and language independent model for manipulating and interacting with elements 00:31.240 --> 00:32.310 in HTML documents. 00:33.040 --> 00:36.860 The dome is neither part of HTML nor part of JavaScript. 00:37.150 --> 00:38.980 It is a separate set of rules. 00:39.670 --> 00:41.570 It cannot work without a document. 00:43.060 --> 00:48.880 So when you create a Web page and load it in a web browser, the DOM is enabled. 00:50.140 --> 00:53.260 The document is represented as a family tree. 00:53.830 --> 01:00.490 A family tree represents a real family, describes the relationships between family members, and uses 01:00.490 --> 01:02.750 terms like parent, child and sibling. 01:03.430 --> 01:10.180 So one member of a family can be a parent to others while also being the child of another family member 01:10.570 --> 01:12.870 and the sibling of another family member. 01:13.970 --> 01:16.460 This can be represented by the following model. 01:17.680 --> 01:22.870 Let's take a look on that diagram and go through the Web page structure to see what I'm talking about 01:22.870 --> 01:23.390 exactly. 01:24.070 --> 01:27.250 The document begins by opening an A.T.M. tag. 01:28.200 --> 01:35.490 All the other elements of the Web page are contained within this element, meaning it is apparent because 01:35.490 --> 01:40.120 of the other elements are inside, the attack has no parent itself. 01:40.830 --> 01:42.660 It also has no siblings. 01:43.980 --> 01:47.220 If we move one level deeper, we find two elements. 01:47.220 --> 01:52.200 Had anybody they exist side by side, which makes them siblings. 01:53.210 --> 02:00.520 They have the same parent e-mail, but they also contain children, so they are parents themselves, 02:01.430 --> 02:06.530 they had Ellerman has two children matter and title siblings of one another. 02:07.340 --> 02:14.000 The children of the body element are H1 P and you are all siblings of one another. 02:15.020 --> 02:22.220 If we go down deeper still, we find that fuel is also apparent, it has three children, all of them 02:22.220 --> 02:23.090 at least elements. 02:25.140 --> 02:31.330 Instead of using the term family tree, it's more correct to call a document as a node tree. 02:31.980 --> 02:36.600 So what is a node document is a collection of notes. 02:37.050 --> 02:39.660 Everything in HTML document is a node. 02:40.020 --> 02:47.580 So as we said, the two nodes representing the head and body elements are examples of child nodes and 02:47.580 --> 02:50.520 the HTML elements node about them is apparent node. 02:52.340 --> 02:59.570 When we talk about notes, we need to consider three main things aliment, notes, text notes and attribute 02:59.570 --> 02:59.960 notes. 03:00.770 --> 03:06.420 If you take a look on the screen, you will see here a simple paragraph with attribute and content. 03:06.830 --> 03:08.160 This is my first paragraph. 03:09.020 --> 03:11.550 Parliament itself is an element note. 03:12.200 --> 03:13.710 It contains text. 03:14.120 --> 03:17.660 This is my first paragraph, which we call a text note. 03:18.840 --> 03:24.660 Attributes are used to give more specific information about an element, so in the document, object 03:24.660 --> 03:32.630 model, class attribute with all other attributes is called as an attribute note regarding Domme notes. 03:32.640 --> 03:34.380 We will talk deeper a bit later. 03:35.520 --> 03:36.060 All right. 03:37.120 --> 03:42.040 Throughout the course, we're going to build a simple but nice app using Tom. 03:43.690 --> 03:50.680 It is a note by nature where you can add notes, delete them. 03:52.130 --> 03:55.040 You can also edit each of the notes. 03:57.400 --> 04:00.670 We have here the search filter. 04:02.080 --> 04:09.970 Using that filter, we are able to search through the notes and get the next one, and you can also 04:09.970 --> 04:12.780 hide the notes and then unhide them. 04:14.510 --> 04:20.330 During the lectures, we will use this project in order to test and learn a lot of things regarding 04:20.330 --> 04:20.660 done. 04:21.590 --> 04:29.360 So throughout this section, you will learn how to change the content of elements, how to change the 04:29.360 --> 04:30.290 style of them. 04:30.950 --> 04:34.100 Dom allows you to change the course of styles, four elements. 04:35.060 --> 04:42.170 Then you will learn how to react to Actimel events and also how to add and delete elements. 04:43.160 --> 04:43.670 All right. 04:45.150 --> 04:50.970 It was a little introduction regarding what a document object model is. 04:52.290 --> 04:52.940 Let's move on.