1 00:00:02,240 --> 00:00:09,380 You heard me say DOM or refer to something called the DOM on the last introductory lecture here. 2 00:00:09,380 --> 00:00:16,640 Now what is that DOM thing? For that, let's understand what the browser does with the HTML code 3 00:00:16,640 --> 00:00:21,200 which is part of any web page we create and how Javascript works with that. 4 00:00:21,250 --> 00:00:23,460 So we get Javascript and we get the browser, 5 00:00:23,540 --> 00:00:26,930 these two pieces which interact all the time 6 00:00:26,930 --> 00:00:33,950 and now let's say on our web page where this Javascript code is loaded eventually, we also render this 7 00:00:34,040 --> 00:00:35,930 basic HTML code. 8 00:00:35,990 --> 00:00:41,380 Now of course we also have a head in our HTML code but let's say this is what's in our body there. 9 00:00:41,390 --> 00:00:48,410 So what actually happens is that when this HTML file, the HTML document is downloaded, the browser 10 00:00:48,440 --> 00:00:51,540 goes over it and parses it and renders it 11 00:00:51,770 --> 00:00:58,100 and I showed you this earlier in the course already when I showed you the different ways of loading Javascript 12 00:00:58,100 --> 00:01:05,180 files and how that affects the parsing of the HTML code because the browser simply reads that HTML 13 00:01:05,180 --> 00:01:11,540 file from top to bottom and when it encounters a script, it executes it, when it encounters other 14 00:01:11,570 --> 00:01:17,630 HTML elements, it simply parses and renders those and in the end, it then renders the pixels on the screen 15 00:01:17,660 --> 00:01:22,910 which you need to see to see a button, to see a title and so on, 16 00:01:22,910 --> 00:01:28,100 so that's what's happening here. Now Javascript might be part of that web page, 17 00:01:28,100 --> 00:01:31,930 Iitcertainly is in all the web pages we work with in this course 18 00:01:31,940 --> 00:01:33,650 and it's loaded by the browser. 19 00:01:33,650 --> 00:01:36,840 Now don't forget that Javascript is a hosted language, 20 00:01:37,100 --> 00:01:39,450 I mentioned this in the first course module, 21 00:01:39,530 --> 00:01:43,800 that means the browser provides the environment for Javascript to run, 22 00:01:43,910 --> 00:01:49,520 it provides the Javascript engine which in the end parses and understands all the Javascript code and 23 00:01:49,520 --> 00:01:50,630 executes it in the end. 24 00:01:51,440 --> 00:01:58,550 So the browser provides that, it also provides a bunch of APIs, a bunch of functionalities into which 25 00:01:58,550 --> 00:02:04,220 Javascript can tap so that Javascript can interact with the browser. 26 00:02:04,220 --> 00:02:09,800 We also saw that already and it will become super important here now when we work with the loaded and 27 00:02:09,800 --> 00:02:18,410 rendered HTML code because the browser actually exposes functionality to let Javascript interact with 28 00:02:18,410 --> 00:02:24,410 that rendered HTML code and in the end that's called the Document Object Model, 29 00:02:24,410 --> 00:02:28,120 the abbreviation of course is DOM and that's where this term comes from. 30 00:02:28,490 --> 00:02:34,780 So the DOM in the end is this loaded and rendered HTML code or to be precise, the 31 00:02:34,850 --> 00:02:41,390 object representation of this code which the browser creates behind the scenes into which we can tap 32 00:02:41,480 --> 00:02:48,470 with Javascript. So Javascript can work with a bunch of objects which will be exposed to us as Javascript 33 00:02:48,500 --> 00:02:54,860 objects which in the end represent what the browser rendered or what the browser made of that HTML 34 00:02:54,860 --> 00:02:57,600 code which was provided. And in Javascript, 35 00:02:57,600 --> 00:03:03,890 we got certain methods, certain functionalities, like here this document query selector code that allows 36 00:03:03,890 --> 00:03:09,680 us to reach out to the loaded HTML code and for example with this code snippet which you see here, 37 00:03:09,930 --> 00:03:16,460 we get access to the first h1 element we have in the loaded HTML code and of course you learned about 38 00:03:16,520 --> 00:03:22,340 all the different ways of querying HTML elements and how to configure them in this module. 39 00:03:22,340 --> 00:03:26,850 I also briefly want to mention that the DOM is not strictly tied to browsers, 40 00:03:26,900 --> 00:03:34,020 there are other tools which can also parse HTML that's not even restricted to Javascript, 41 00:03:34,040 --> 00:03:41,600 so in other languages like Python you also can find certain tools or certain plugins, extensions which 42 00:03:41,630 --> 00:03:47,510 allow you to read and work with HTML code or also with Javascript 43 00:03:47,510 --> 00:03:53,420 if you're running it through Node.js. let's say, that does not have this DOM functionality built in 44 00:03:53,420 --> 00:03:59,420 because you typically use it on the server side or it's simply detached from a browser but you 45 00:03:59,420 --> 00:04:05,600 can still add certain packages to kind of bring that back in and still be able to parse and read a HTML 46 00:04:05,590 --> 00:04:06,740 file. 47 00:04:06,740 --> 00:04:12,890 The browser however has it all built in for you and in the end, it has to import and built-in global 48 00:04:12,950 --> 00:04:19,430 objects you could say which kind of grant you this access and we can see one on this screen already, 49 00:04:19,610 --> 00:04:25,280 this document object here in the end which is globally available which is not created by you but which 50 00:04:25,280 --> 00:04:31,000 the browser exposes to you to give you access to all the different ways of interacting with that HTML 51 00:04:31,040 --> 00:04:32,270 page. 52 00:04:32,320 --> 00:04:38,090 Now I mentioned the document, this is one important piece in working with the loaded HTML code, 53 00:04:38,150 --> 00:04:44,060 there also is another important global object and actually, document is a property of that other global 54 00:04:44,150 --> 00:04:44,780 object 55 00:04:44,780 --> 00:04:46,370 and that's the window object. 56 00:04:46,370 --> 00:04:52,450 Now the difference is that document in the end is the root DOM node which the browser exposes to you. 57 00:04:52,580 --> 00:04:53,460 That means that 58 00:04:53,480 --> 00:04:59,480 this is really the topmost entry point to get access to all that rendered HTML code. 59 00:04:59,720 --> 00:05:06,640 So this provides you various methods and functionalities to get access to the elements, to query for elements, 60 00:05:06,640 --> 00:05:13,020 to query for HTML elements, to interact with its DOM contents, so to interact with a loaded HTML 61 00:05:13,030 --> 00:05:20,830 code. window on the other hand is a global object which as I just said actually has document as property, 62 00:05:21,070 --> 00:05:27,790 so window is the real topmost global object made available to you in Javascript in the browser and that 63 00:05:27,790 --> 00:05:33,090 in the end reflects the active browser window or tab if you want to call it like this. 64 00:05:33,520 --> 00:05:39,880 So it's basically your global entry point, your global storage if you want to call it like this for your 65 00:05:39,880 --> 00:05:45,380 script, so it gives you access to all the features that the browser wants to expose to you, 66 00:05:45,430 --> 00:05:51,610 the root entry point is always to the window object but it also gives you some window specific properties 67 00:05:51,610 --> 00:05:56,600 for example for measuring the window width or anything like that which we'll also have a look at throughout 68 00:05:56,620 --> 00:05:57,760 this module of course.