1 00:00:02,130 --> 00:00:06,280 So, what is this DOM thing about then? 2 00:00:06,280 --> 00:00:11,280 DOM is the abbreviation for document object model. 3 00:00:11,670 --> 00:00:15,420 And that's a concept in web development 4 00:00:15,420 --> 00:00:19,570 that describes the data representation, 5 00:00:19,570 --> 00:00:22,740 the browser internal representation, 6 00:00:22,740 --> 00:00:26,910 of the parsed HTML code we wrote. 7 00:00:26,910 --> 00:00:30,220 So as a web developer, we write HTML code. 8 00:00:30,220 --> 00:00:33,250 That's what we did in all those previous sections basically. 9 00:00:33,250 --> 00:00:36,500 And the browser, when it loads this website, 10 00:00:36,500 --> 00:00:38,320 then parses this code, 11 00:00:38,320 --> 00:00:41,720 so that it knows what it should display on the screen. 12 00:00:41,720 --> 00:00:44,900 Now, during this parsing process, 13 00:00:44,900 --> 00:00:49,770 the browser kind of translates the HTML code 14 00:00:49,770 --> 00:00:53,840 into a bunch of JavaScript objects, you could say. 15 00:00:53,840 --> 00:00:57,940 Every HTML element we created is translated 16 00:00:57,940 --> 00:00:59,760 to a JavaScript object 17 00:00:59,760 --> 00:01:02,750 and those objects are then nested into each other 18 00:01:02,750 --> 00:01:06,650 to represent our HTML structure. 19 00:01:06,650 --> 00:01:09,100 That's how you can think about it. 20 00:01:09,100 --> 00:01:11,210 Technically it's a bit more advanced than that, 21 00:01:11,210 --> 00:01:13,920 but roughly that is what's going on. 22 00:01:13,920 --> 00:01:18,920 And since we have this JavaScript representation 23 00:01:19,060 --> 00:01:20,970 of our HTML code. 24 00:01:20,970 --> 00:01:24,910 So since this HTML structure was translated 25 00:01:24,910 --> 00:01:28,810 into a structure of JavaScript objects, 26 00:01:28,810 --> 00:01:32,040 our JavaScript code is able to interact 27 00:01:32,040 --> 00:01:34,430 with that DOM as it's called. 28 00:01:34,430 --> 00:01:37,510 So with that browser internal representation 29 00:01:37,510 --> 00:01:41,660 of the HTML code, and we can extract data from there, 30 00:01:41,660 --> 00:01:45,440 for example, to read some value the user entered 31 00:01:45,440 --> 00:01:49,760 into an input field and, or manipulate it. 32 00:01:49,760 --> 00:01:53,680 We can add new elements, change existing elements, 33 00:01:53,680 --> 00:01:56,640 for example, change to content or the styling 34 00:01:56,640 --> 00:01:59,530 and do many other things. 35 00:01:59,530 --> 00:02:04,530 And the door to this DOM thing is this document object. 36 00:02:05,280 --> 00:02:09,520 Through that object we access this so-called DOM. 37 00:02:09,520 --> 00:02:14,520 So this browser internal representation off our HTML code. 38 00:02:15,920 --> 00:02:19,450 Now why will they is DOM thing 39 00:02:19,450 --> 00:02:22,873 and this document object matter to us? 40 00:02:23,950 --> 00:02:28,430 Because if we want to build a feature for our website, 41 00:02:28,430 --> 00:02:31,280 like this character counter, 42 00:02:31,280 --> 00:02:33,970 where we can see how many characters are left 43 00:02:33,970 --> 00:02:36,300 before we hit the max length 44 00:02:36,300 --> 00:02:40,460 and where we changed the styling of these elements 45 00:02:40,460 --> 00:02:44,770 when we go below 10 remaining characters. 46 00:02:44,770 --> 00:02:47,330 If you want to build something like this, 47 00:02:47,330 --> 00:02:51,960 then we'll need that DOM, because in our code, 48 00:02:51,960 --> 00:02:55,010 which you can't understand at this point, 49 00:02:55,010 --> 00:02:57,050 but we'll get to there throughout the course, 50 00:02:57,050 --> 00:02:58,970 in our code we will, for example, 51 00:02:58,970 --> 00:03:03,960 use this document object, to get access to certain elements 52 00:03:03,960 --> 00:03:05,610 in our HTML code. 53 00:03:05,610 --> 00:03:08,130 So to certain elements on this page, 54 00:03:08,130 --> 00:03:10,850 like this input field to then, 55 00:03:10,850 --> 00:03:15,000 listen to certain events, extract, for example, 56 00:03:15,000 --> 00:03:17,000 the current input value, 57 00:03:17,000 --> 00:03:19,710 to then count the number of characters 58 00:03:19,710 --> 00:03:21,590 that are currently entered 59 00:03:21,590 --> 00:03:26,590 and to then change the styling, or add extra classes. 60 00:03:27,150 --> 00:03:30,290 And again, we will learn how exactly that works 61 00:03:30,290 --> 00:03:32,150 and what all that code does, 62 00:03:32,150 --> 00:03:34,663 step-by-step throughout this module. 63 00:03:35,580 --> 00:03:39,430 But the debts, why does DOM thing will matter to us. 64 00:03:39,430 --> 00:03:44,430 We need a way of getting access to the parsed HTML code 65 00:03:44,820 --> 00:03:47,890 in the browser so that we can change it 66 00:03:47,890 --> 00:03:50,930 or that we can extract values from it. 67 00:03:50,930 --> 00:03:53,640 Like, for example, the entered input. 68 00:03:53,640 --> 00:03:55,130 That's why we need the DOM, 69 00:03:55,130 --> 00:03:58,220 because our JavaScript code needs access 70 00:03:58,220 --> 00:04:00,463 to what's happening on the screen. 71 00:04:01,510 --> 00:04:03,500 And that's what we're going to explore 72 00:04:03,500 --> 00:04:05,130 over the next lectures, 73 00:04:05,130 --> 00:04:07,493 and then this will all become clearer.