1 00:00:05,870 --> 00:00:06,980 In this video. 2 00:00:07,010 --> 00:00:09,380 Let's start with the dome. 3 00:00:09,650 --> 00:00:14,120 And the first concept is we are going to examine the dome. 4 00:00:14,920 --> 00:00:18,640 In the previous video we explain what is the dom. 5 00:00:18,640 --> 00:00:24,430 So in this video, let's see in reality what we explained in the previous video. 6 00:00:24,460 --> 00:00:26,230 So let's get started. 7 00:00:26,560 --> 00:00:35,050 So as usual, I have a starter project that we need to download extra straight and open using your Visual 8 00:00:35,050 --> 00:00:42,640 Studio code or better so you can use any HTML application or template to get started with how we are 9 00:00:42,640 --> 00:00:44,320 going to examine the dome. 10 00:00:44,620 --> 00:00:50,890 But if one has to be on the same pipeline, our edu to download it so that we be on the same page. 11 00:00:51,100 --> 00:00:55,870 So I have open this particular project as we see on the screen. 12 00:00:56,020 --> 00:00:59,890 So let's go through the syntax for this HTML. 13 00:00:59,890 --> 00:01:04,900 Again, this section isn't about H.M. but instead is about Adam. 14 00:01:04,900 --> 00:01:12,790 That is why I have provided the startup template or project for you to see that we have each one here 15 00:01:12,970 --> 00:01:16,900 and with each how to underline it as we see here. 16 00:01:17,800 --> 00:01:26,470 And from there I added a paragraph with a few dummy text and a link tag inside the P tag and each one 17 00:01:26,470 --> 00:01:28,690 and few lines of code here. 18 00:01:28,690 --> 00:01:33,940 And we have other does have this content being displayed here as that. 19 00:01:33,940 --> 00:01:38,200 And lastly, I have a form that I added down here. 20 00:01:38,230 --> 00:01:38,950 All right. 21 00:01:38,950 --> 00:01:40,600 So let's get started. 22 00:01:40,600 --> 00:01:45,940 How we are going to use the DOM to manipulate these content. 23 00:01:46,240 --> 00:01:54,640 So in the first place, we are going to select elements in the DOM using some DOM method because I have 24 00:01:54,640 --> 00:01:57,290 already connected my JavaScript. 25 00:01:57,310 --> 00:02:00,220 I can go ahead and make use of the DOM. 26 00:02:00,400 --> 00:02:07,450 So the first step is we still have access to the console.log, so let's console.log and let's see that 27 00:02:07,450 --> 00:02:16,450 JavaScript connected and see that indeed our file has been connected up in the console and now indeed 28 00:02:16,450 --> 00:02:17,980 JavaScript connected. 29 00:02:17,980 --> 00:02:21,850 So let's see how we can interact with the DOM. 30 00:02:22,210 --> 00:02:27,940 And for this one we have a special method called document. 31 00:02:28,120 --> 00:02:33,340 The document is the parent of the entire DOM. 32 00:02:33,340 --> 00:02:37,090 So if MC is of document, what is a global method? 33 00:02:37,120 --> 00:02:38,530 Is that so? 34 00:02:38,530 --> 00:02:41,290 If I console.log that, let's see what we have. 35 00:02:41,290 --> 00:02:46,840 You can see that we have the document which represents our HTML. 36 00:02:47,170 --> 00:02:50,070 So the document represents our HTML. 37 00:02:50,200 --> 00:02:57,400 See that we have the dock type up here and indeed we have it up here also. 38 00:02:57,400 --> 00:03:04,810 And from there we have the HTML tag with the language and that's what we have it here. 39 00:03:04,840 --> 00:03:08,830 So the document represents the entire HTML. 40 00:03:09,100 --> 00:03:14,440 So if I open it, we see that we have the body here, I can open it. 41 00:03:14,440 --> 00:03:18,790 And now this is my dom, you can see that. 42 00:03:18,790 --> 00:03:24,940 So for this particular element here, we can select pieces of this element. 43 00:03:24,940 --> 00:03:29,620 For example, I can select only one or the body. 44 00:03:29,620 --> 00:03:32,410 So let's move step by step. 45 00:03:32,530 --> 00:03:39,550 So the root note of the DOM tree is what we call the document element. 46 00:03:39,550 --> 00:03:40,840 So here we go. 47 00:03:40,900 --> 00:03:43,270 So let me comment here. 48 00:03:43,810 --> 00:03:45,310 Okay, let me bring it back. 49 00:03:45,580 --> 00:03:47,380 Sorry, bring it back on that. 50 00:03:47,380 --> 00:03:51,850 We have what is called the document element. 51 00:03:52,060 --> 00:03:53,680 Okay, document element. 52 00:03:53,680 --> 00:03:56,530 So if I save it now, check it out. 53 00:03:56,530 --> 00:03:59,950 Indeed, this is my document element. 54 00:03:59,950 --> 00:04:05,530 So this one represents the root node of the entire DOM. 55 00:04:05,530 --> 00:04:14,440 So this is equal to the the root node of the DOM tree. 56 00:04:14,650 --> 00:04:20,680 And after that we can also get a body of the Don of my HTML. 57 00:04:20,680 --> 00:04:25,540 So it's going to be as console.log. 58 00:04:25,570 --> 00:04:29,530 Document, document. 59 00:04:31,510 --> 00:04:33,020 Dot body. 60 00:04:33,040 --> 00:04:38,200 So this one gave me the body of my H.M. So let me refresh it. 61 00:04:38,200 --> 00:04:42,340 And now let me remove this one because I'm done with the first one. 62 00:04:42,340 --> 00:04:49,390 So document the body is the element of the HTML, document the body of the document. 63 00:04:49,390 --> 00:04:52,030 We see that now this is the body. 64 00:04:52,150 --> 00:04:57,190 So now I can use JavaScript to move this one from the page. 65 00:04:57,310 --> 00:04:58,180 That's awesome. 66 00:04:58,180 --> 00:05:06,130 Now with a dome we can select pieces of this node or the DOM tree as the way we want it. 67 00:05:06,430 --> 00:05:13,930 And let's say that I want to have the head of my HTML, for example, I want to select the head only 68 00:05:14,410 --> 00:05:15,670 we can do so. 69 00:05:15,670 --> 00:05:16,870 Copy this one. 70 00:05:17,350 --> 00:05:18,430 Come down here. 71 00:05:18,430 --> 00:05:21,100 We're going to be documents dot head. 72 00:05:21,370 --> 00:05:22,180 Let's check it out. 73 00:05:22,180 --> 00:05:25,600 And indeed I have the head which is this one. 74 00:05:25,750 --> 00:05:30,670 See, I have selected only the head element as that. 75 00:05:30,670 --> 00:05:41,950 So again, we can also select the title, title of my page, which is going to be title of the page, 76 00:05:41,950 --> 00:05:45,640 which is going to be this one, which is examine the DOM. 77 00:05:45,640 --> 00:05:47,920 So the whole of this one will be selected. 78 00:05:47,920 --> 00:05:54,400 So this is what we call a node, meaning we are selecting pieces of the DOM and that's what you call 79 00:05:54,400 --> 00:05:54,880 the node. 80 00:05:54,880 --> 00:05:59,980 And indeed this is what we have the title called Examine the Dom. 81 00:06:00,130 --> 00:06:01,450 So let me comment. 82 00:06:01,450 --> 00:06:02,950 This one's out. 83 00:06:02,950 --> 00:06:09,730 Well, we can also select the children of the element body. 84 00:06:09,730 --> 00:06:20,110 So let's come down here and say that select it's going to be select element. 85 00:06:22,530 --> 00:06:24,390 In the document. 86 00:06:25,560 --> 00:06:27,270 In the document. 87 00:06:27,990 --> 00:06:28,330 Body. 88 00:06:28,440 --> 00:06:34,410 Now we know the document body that contains the actual content of our web page. 89 00:06:34,710 --> 00:06:38,580 So for that content, we can select additional elements. 90 00:06:38,580 --> 00:06:42,890 So here we can select document. 91 00:06:44,370 --> 00:06:50,190 Dot, body, dot, dot children. 92 00:06:50,190 --> 00:06:52,110 So let's see what we have. 93 00:06:52,200 --> 00:06:55,980 The children is a children of the element body. 94 00:06:55,980 --> 00:07:04,410 So if I save it nine p see that these are the children of my document body, meaning the tax that has 95 00:07:04,410 --> 00:07:06,870 been used in my application. 96 00:07:06,960 --> 00:07:17,280 We see that first we have h one which is this which is this 1h1 first and followed by the h r which 97 00:07:17,280 --> 00:07:29,280 is this followed by P which is this one and from the h one which is also the C, the children of my 98 00:07:29,280 --> 00:07:30,150 application. 99 00:07:30,870 --> 00:07:32,400 That's, that's children for you. 100 00:07:32,970 --> 00:07:40,680 So if we want to know all the tasks that has been used in the application, we can use the body dot 101 00:07:41,160 --> 00:07:43,740 children to get those tasks. 102 00:07:43,740 --> 00:07:50,070 We see that we have lastly the JavaScript script file here and you can see that down here we have the 103 00:07:50,070 --> 00:07:59,850 JavaScript script file that is about the document dot children and we can also get the first child element. 104 00:07:59,850 --> 00:08:04,050 So paste it here and then comment this one out. 105 00:08:04,050 --> 00:08:10,860 So it isn't going to be the body, the first child element, first element child. 106 00:08:10,860 --> 00:08:11,460 Sorry. 107 00:08:11,790 --> 00:08:16,530 So this is the first chart of the body element, the first child. 108 00:08:16,530 --> 00:08:22,200 So when I say it, the first child is what the is the H one. 109 00:08:22,200 --> 00:08:27,570 Because looking at the syntax here, the first chart is for the H one. 110 00:08:27,750 --> 00:08:34,980 If I remove this one now, the first child will be what you can guess is going to be the h r which is 111 00:08:34,980 --> 00:08:35,669 this one. 112 00:08:36,059 --> 00:08:43,500 So if we want to know the first child of your node of your HTML, we can use body the first element 113 00:08:43,500 --> 00:08:44,100 child. 114 00:08:44,490 --> 00:08:46,410 So let me bring it back again. 115 00:08:46,410 --> 00:08:50,190 That is the first element child for you. 116 00:08:50,580 --> 00:08:58,920 And if we don't know the last child of the body element, we can we can also use this method. 117 00:08:59,460 --> 00:09:01,620 So let me comment this one. 118 00:09:02,260 --> 00:09:10,450 Now I want the last child of the body element going to be last element child. 119 00:09:10,450 --> 00:09:11,740 So check it out. 120 00:09:11,770 --> 00:09:17,110 The last one is the JavaScript file of which I use inside it. 121 00:09:17,140 --> 00:09:18,420 That is what I have. 122 00:09:18,430 --> 00:09:20,120 So inside my HTML. 123 00:09:20,140 --> 00:09:20,950 Scroll down. 124 00:09:20,950 --> 00:09:25,090 And this is the last child element in the body. 125 00:09:25,660 --> 00:09:26,110 All right. 126 00:09:26,110 --> 00:09:31,040 So let's say that we also want to know the number of children of the body. 127 00:09:31,060 --> 00:09:35,340 We can use the children element count. 128 00:09:35,350 --> 00:09:38,710 So let me bring this one here and comment. 129 00:09:38,710 --> 00:09:44,860 This one out is going to be child element count. 130 00:09:44,860 --> 00:09:46,360 So let's see what we have. 131 00:09:46,360 --> 00:09:49,600 We have 13 elements in the page. 132 00:09:49,630 --> 00:09:53,940 That is the child element count. 133 00:09:53,950 --> 00:10:01,420 And if we don't know the first child of this body, it is same as using the first child element. 134 00:10:01,420 --> 00:10:06,130 And let's say that you want to know the children of the body element. 135 00:10:06,130 --> 00:10:08,790 We can use the child node. 136 00:10:08,800 --> 00:10:10,780 So come here. 137 00:10:10,930 --> 00:10:17,710 Comments this one and I'm going to be the body taught children knows. 138 00:10:18,010 --> 00:10:19,360 So let's see. 139 00:10:19,570 --> 00:10:22,270 So this is similar to the children. 140 00:10:22,810 --> 00:10:30,010 Well, we have a lot of these how we can select the pieces of node in application. 141 00:10:30,250 --> 00:10:37,900 But in rare cases we are going to use this format, but instead we are going to use JavaScript to target 142 00:10:37,900 --> 00:10:42,340 the individual element so that we can use it to interact with a dom. 143 00:10:42,340 --> 00:10:49,000 So now that we know how we can select pieces of node in application, then next video. 144 00:10:49,030 --> 00:10:55,230 Let's start with how we can select this element with JavaScript. 145 00:10:55,240 --> 00:10:58,150 That's where the magic comes into play. 146 00:10:58,420 --> 00:11:04,090 After that, we cannot add content to the page using a HTML.