Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,180 --> 00:00:03,410 Let's start this section by learning 2 2 00:00:03,410 --> 00:00:05,866 how the DOM really works behind the scenes 3 3 00:00:05,866 --> 00:00:10,866 and more specifically how the DOM is organized internally. 4 4 00:00:11,450 --> 00:00:14,510 This will make it easier to understand everything else 5 5 00:00:14,510 --> 00:00:16,623 that's gonna follow in this section. 6 6 00:00:18,410 --> 00:00:21,170 So first, remember that the DOM 7 7 00:00:21,170 --> 00:00:25,280 is basically the interface between all JavaScript code 8 8 00:00:25,280 --> 00:00:29,770 and the browser, or more specifically HTML documents 9 9 00:00:29,770 --> 00:00:33,620 that are rendered in and by the browser. 10 10 00:00:33,620 --> 00:00:37,120 Now we have written a ton of JavaScript code 11 11 00:00:37,120 --> 00:00:38,910 in this course so far, 12 12 00:00:38,910 --> 00:00:42,120 but many times completely without interacting 13 13 00:00:42,120 --> 00:00:45,860 with the browser so without using the DOM. 14 14 00:00:45,860 --> 00:00:47,420 Right? 15 15 00:00:47,420 --> 00:00:50,900 But now we're back to working with webpages 16 16 00:00:50,900 --> 00:00:53,570 and therefore with the DOM 17 17 00:00:53,570 --> 00:00:56,261 and this time we're going to learn as much as possible 18 18 00:00:56,261 --> 00:01:01,261 about the DOM and how to create amazing dynamic effects. 19 19 00:01:01,660 --> 00:01:05,460 So let's remember what we already know about the DOM, 20 20 00:01:05,460 --> 00:01:07,810 which is that we can use it to make 21 21 00:01:07,810 --> 00:01:10,940 JavaScript interact with the browser 22 22 00:01:10,940 --> 00:01:14,220 and again more specifically we can create 23 23 00:01:14,220 --> 00:01:17,050 and modify and delete elements, 24 24 00:01:17,050 --> 00:01:20,340 set styles and classes and attributes 25 25 00:01:20,340 --> 00:01:23,053 and listen and respond to events. 26 26 00:01:23,970 --> 00:01:27,070 In practice this works because a DOM tree 27 27 00:01:27,070 --> 00:01:30,970 is generated from any HTML document 28 28 00:01:30,970 --> 00:01:35,420 and a DOM tree is a tree like structure made out of nodes 29 29 00:01:35,420 --> 00:01:38,300 which looks something like this. 30 30 00:01:38,300 --> 00:01:40,870 And we can then interact with this tree 31 31 00:01:40,870 --> 00:01:44,900 as we already did a couple of times in this course. 32 32 00:01:44,900 --> 00:01:47,882 Now how does that interaction actually work? 33 33 00:01:47,882 --> 00:01:52,340 Well the DOM is a very complex API 34 34 00:01:52,340 --> 00:01:56,383 which remember stands for application programming interface. 35 35 00:01:57,849 --> 00:02:00,080 So it's the interface we can use to 36 36 00:02:00,080 --> 00:02:03,720 programmatically interact with the DOM. 37 37 00:02:03,720 --> 00:02:06,300 In practice that means that the DOM 38 38 00:02:06,300 --> 00:02:08,867 contains a ton of methods and properties 39 39 00:02:08,867 --> 00:02:12,470 that we use to interact with the DOM tree 40 40 00:02:12,470 --> 00:02:14,620 such as the querySelector, addEventListener 41 41 00:02:15,949 --> 00:02:18,570 or createElement methods, 42 42 00:02:18,570 --> 00:02:23,516 or also the innerHTML, textContent or children properties 43 43 00:02:23,516 --> 00:02:25,373 and many, many more. 44 44 00:02:26,250 --> 00:02:30,050 Now in the DOM there are different types of nodes 45 45 00:02:30,050 --> 00:02:32,470 just as I mentioned before. 46 46 00:02:32,470 --> 00:02:35,750 For example some nodes are HTML elements 47 47 00:02:35,750 --> 00:02:39,240 but others are just text, remember? 48 48 00:02:39,240 --> 00:02:41,940 And this is really important to understand 49 49 00:02:41,940 --> 00:02:44,556 because all these DOM methods and properties 50 50 00:02:44,556 --> 00:02:49,073 are organized into these different types of objects. 51 51 00:02:50,710 --> 00:02:53,970 And so let's now take a look at how the DOM API 52 52 00:02:53,970 --> 00:02:56,780 is organized behind the scenes. 53 53 00:02:56,780 --> 00:02:59,977 So first, every single note in the DOM tree 54 54 00:02:59,977 --> 00:03:02,720 is of the type, node. 55 55 00:03:02,720 --> 00:03:05,670 And such as everything else in JavaScript, 56 56 00:03:05,670 --> 00:03:10,092 each node is represented in JavaScript by an object. 57 57 00:03:10,092 --> 00:03:13,690 This object gets access to special node methods 58 58 00:03:13,690 --> 00:03:17,640 and properties, such as text content, child nodes, 59 59 00:03:17,640 --> 00:03:21,063 parent nodes, clone nodes and many others. 60 60 00:03:21,900 --> 00:03:25,320 Now we already know that there are different types of nodes. 61 61 00:03:25,320 --> 00:03:27,000 Right? 62 62 00:03:27,000 --> 00:03:30,167 So how should these be represented? 63 63 00:03:30,167 --> 00:03:35,167 Well, this node type has a couple of child types so to say. 64 64 00:03:35,660 --> 00:03:39,480 And these are the element type, the text type, 65 65 00:03:39,480 --> 00:03:43,588 the comment type and also the document type. 66 66 00:03:43,588 --> 00:03:47,800 So whenever there is text inside any element, 67 67 00:03:47,800 --> 00:03:50,587 we already know that it gets its own node. 68 68 00:03:50,587 --> 00:03:52,080 Right? 69 69 00:03:52,080 --> 00:03:55,890 And that node will be of the type, text. 70 70 00:03:55,890 --> 00:03:59,930 And the same actually happens for HTML comments 71 71 00:03:59,930 --> 00:04:03,060 and that's because the rule is that everything 72 72 00:04:03,060 --> 00:04:07,870 that's in the HTML has to go into the DOM as well. 73 73 00:04:07,870 --> 00:04:10,400 Now for the element itself there is 74 74 00:04:10,400 --> 00:04:12,830 the element type of node. 75 75 00:04:12,830 --> 00:04:16,773 And this type of node gives each HTML access 76 76 00:04:16,773 --> 00:04:19,112 to a ton of useful properties 77 77 00:04:19,112 --> 00:04:24,112 such as innerHTML, classList, children or parent element. 78 78 00:04:25,065 --> 00:04:28,300 There are also many useful methods 79 79 00:04:28,300 --> 00:04:33,300 like append, remove, insertAdjacentHTML, querySelector, 80 80 00:04:33,300 --> 00:04:36,783 closest and that's just to name a few. 81 81 00:04:37,670 --> 00:04:41,763 So again, each element will be represented internally 82 82 00:04:41,763 --> 00:04:44,070 as an object. 83 83 00:04:44,070 --> 00:04:46,120 Now just to make this complete, 84 84 00:04:46,120 --> 00:04:50,180 the element type has internally an HTML element, 85 85 00:04:50,180 --> 00:04:51,698 child type. 86 86 00:04:51,698 --> 00:04:56,590 And that element type itself has exactly one child type 87 87 00:04:56,590 --> 00:05:01,227 for each HTML element that exists in HTML. 88 88 00:05:01,227 --> 00:05:04,530 So we have a special type for buttons, 89 89 00:05:04,530 --> 00:05:06,520 a special type for images, 90 90 00:05:06,520 --> 00:05:09,900 for links, and so on and so forth. 91 91 00:05:09,900 --> 00:05:14,070 And that's important because each of these HTML elements 92 92 00:05:14,070 --> 00:05:16,830 can have different unique properties. 93 93 00:05:16,830 --> 00:05:21,190 For example and image has a source attribute in HTML 94 94 00:05:21,190 --> 00:05:22,913 which no other element has. 95 95 00:05:24,287 --> 00:05:25,750 Or the anchor element for links 96 96 00:05:25,750 --> 00:05:30,520 has the HREF attribute which also no other element has. 97 97 00:05:30,520 --> 00:05:32,950 And so the DOM needs a way of storing 98 98 00:05:32,950 --> 00:05:34,700 these different attributes 99 99 00:05:34,700 --> 00:05:36,790 and therefore different types 100 100 00:05:36,790 --> 00:05:40,593 of HTML elements were created in the DOM API. 101 101 00:05:41,510 --> 00:05:44,614 And just to make sure that we're all on the same page here, 102 102 00:05:44,614 --> 00:05:47,280 this diagram that I'm showing you here 103 103 00:05:47,280 --> 00:05:50,320 is of course not a DOM tree. 104 104 00:05:50,320 --> 00:05:51,400 Right? 105 105 00:05:51,400 --> 00:05:56,290 So this is not a representation of any HTML document. 106 106 00:05:56,290 --> 00:05:59,560 This is just a way that different types of nodes 107 107 00:05:59,560 --> 00:06:03,610 are represented behind the scenes in the DOM API. 108 108 00:06:03,610 --> 00:06:04,443 Now, right? 109 109 00:06:05,320 --> 00:06:09,460 But anyway, now comes the really important part, 110 110 00:06:09,460 --> 00:06:11,930 because what makes all of this work 111 111 00:06:11,930 --> 00:06:14,193 is something called inheritance. 112 112 00:06:15,170 --> 00:06:17,503 So what is inheritance? 113 113 00:06:17,503 --> 00:06:21,840 Well inheritance means that all the child types 114 114 00:06:21,840 --> 00:06:24,791 will also get access to the methods and properties 115 115 00:06:24,791 --> 00:06:28,260 of all their parent node types. 116 116 00:06:28,260 --> 00:06:32,760 For example an HTML element will get access to everything 117 117 00:06:32,760 --> 00:06:37,760 from the element type, like innerHTML, or classList 118 118 00:06:38,350 --> 00:06:41,710 or all these other methods and properties. 119 119 00:06:41,710 --> 00:06:45,080 And besides that it will also get access to everything 120 120 00:06:45,080 --> 00:06:49,382 from the node type because that is also its parent type. 121 121 00:06:49,382 --> 00:06:51,220 Okay? 122 122 00:06:51,220 --> 00:06:53,330 So we can think of this as though 123 123 00:06:53,330 --> 00:06:56,310 the HTML button element for example, 124 124 00:06:56,310 --> 00:06:59,950 is also an element and also a node. 125 125 00:06:59,950 --> 00:07:01,400 All right? 126 126 00:07:01,400 --> 00:07:05,010 Now this might seem all a bit weird and confusing 127 127 00:07:05,010 --> 00:07:06,430 but don't worry. 128 128 00:07:06,430 --> 00:07:10,640 We will learn why this kind of inheritance works very soon 129 129 00:07:10,640 --> 00:07:14,670 when we finally talk about object oriented JavaScript. 130 130 00:07:14,670 --> 00:07:18,330 For now, what I want you to understand is that a DOM API 131 131 00:07:18,330 --> 00:07:22,520 is broken up into these different types of nodes. 132 132 00:07:22,520 --> 00:07:25,140 I also want you to understand that each 133 133 00:07:25,140 --> 00:07:26,690 of these types of nodes 134 134 00:07:26,690 --> 00:07:30,080 has access to different properties and methods 135 135 00:07:30,080 --> 00:07:31,150 and that some of them 136 136 00:07:31,150 --> 00:07:33,910 even inherit more properties and methods 137 137 00:07:33,910 --> 00:07:37,770 from their ancestors in this organization. 138 138 00:07:37,770 --> 00:07:38,603 All right? 139 139 00:07:39,500 --> 00:07:43,840 Now we didn't talk yet about the documents node type. 140 140 00:07:43,840 --> 00:07:48,329 So document, which we use all the time in DOM manipulation 141 141 00:07:48,329 --> 00:07:51,470 is in fact just another type of node 142 142 00:07:52,380 --> 00:07:54,650 so it contains important methods, 143 143 00:07:54,650 --> 00:07:56,980 such as querySelector, createElement 144 144 00:07:58,368 --> 00:08:00,480 and getElement by I.D. 145 145 00:08:00,480 --> 00:08:02,100 And note how querySelector 146 146 00:08:02,100 --> 00:08:07,100 is available on both the document and element types. 147 147 00:08:07,290 --> 00:08:11,073 So keep this in mind because it will be important later on. 148 148 00:08:12,060 --> 00:08:14,160 All right, and now there is just 149 149 00:08:14,160 --> 00:08:16,320 one final missing piece here 150 150 00:08:16,320 --> 00:08:19,081 because the DOM API actually needs a way 151 151 00:08:19,081 --> 00:08:24,081 of allowing all the node types to listen to events. 152 152 00:08:24,300 --> 00:08:28,080 And remember we usually listen for events by calling the 153 153 00:08:28,080 --> 00:08:32,550 addEventListener method on an element or the document. 154 154 00:08:32,550 --> 00:08:33,840 Right? 155 155 00:08:33,840 --> 00:08:36,253 So why does that actually work? 156 156 00:08:37,150 --> 00:08:40,660 Well its because there is a special node type called 157 157 00:08:40,660 --> 00:08:45,410 EventTarget which is a parent of both the node type 158 158 00:08:45,410 --> 00:08:48,310 and also the window node type. 159 159 00:08:48,310 --> 00:08:51,120 And so with this, thanks to inheritance, 160 160 00:08:51,120 --> 00:08:55,180 we can call addEventListener on every single type of node 161 161 00:08:55,180 --> 00:08:58,291 in the DOM API because all elements 162 162 00:08:58,291 --> 00:09:01,280 as well as document and window, 163 163 00:09:01,280 --> 00:09:05,830 and even text and comment will inherit this method 164 164 00:09:05,830 --> 00:09:09,720 and therefore we will be able to use addEventListener 165 165 00:09:09,720 --> 00:09:13,920 on all of them just as if it was their own method. 166 166 00:09:13,920 --> 00:09:16,330 Now just to be clear, we do never 167 167 00:09:16,330 --> 00:09:19,510 manually create an eventTarget object. 168 168 00:09:19,510 --> 00:09:20,530 Okay. 169 169 00:09:20,530 --> 00:09:22,693 This is just an abstract type 170 170 00:09:22,693 --> 00:09:25,010 that we do not use in practice. 171 171 00:09:25,010 --> 00:09:27,373 This all really happens behind the scenes 172 172 00:09:27,373 --> 00:09:32,270 to make all the functionality work as we expect it to work. 173 173 00:09:32,270 --> 00:09:36,496 So in a nutshell this is how the DOM API works 174 174 00:09:36,496 --> 00:09:39,770 and is structured behind the scenes. 175 175 00:09:39,770 --> 00:09:42,370 There are still some simplifications here 176 176 00:09:42,370 --> 00:09:44,960 but this is all that really matters. 177 177 00:09:44,960 --> 00:09:48,690 And I really wish that I could have had this diagram 178 178 00:09:48,690 --> 00:09:51,750 when I learnt JavaScript for the first time. 179 179 00:09:51,750 --> 00:09:55,030 Because I really think this helps structuring 180 180 00:09:55,030 --> 00:09:58,080 all this information in your mind. 181 181 00:09:58,080 --> 00:10:00,820 Now if you want to go even deeper than this 182 182 00:10:00,820 --> 00:10:03,160 there is still tons of material 183 183 00:10:03,160 --> 00:10:06,710 that you can check out in the MDN documentation 184 184 00:10:06,710 --> 00:10:10,740 and if you ask me it's all really fascinating. 185 185 00:10:10,740 --> 00:10:13,040 But again, all that you need to know 186 186 00:10:13,040 --> 00:10:15,370 is really in this lecture. 187 187 00:10:15,370 --> 00:10:18,800 It took me a lot of hours to put this one together 188 188 00:10:18,800 --> 00:10:21,360 but I think it was well worth it 189 189 00:10:21,360 --> 00:10:23,670 and I hope you think the same. 190 190 00:10:23,670 --> 00:10:25,690 But anyway lets now move on 191 191 00:10:25,690 --> 00:10:28,520 to the practical part Of this section 192 192 00:10:28,520 --> 00:10:29,580 were we will then 193 193 00:10:29,580 --> 00:10:32,713 finally use many of these things in action. 16837