1 00:00:02,310 --> 00:00:05,450 So this document object, 2 00:00:05,450 --> 00:00:09,630 this document property on the window object, 3 00:00:09,630 --> 00:00:14,630 which holds an object itself. is our bridge to this DOM. 4 00:00:15,240 --> 00:00:18,880 And to see this not just on these slides, 5 00:00:18,880 --> 00:00:21,290 but also in action, 6 00:00:21,290 --> 00:00:26,290 I added some HTML code here to this index HTML file. 7 00:00:28,520 --> 00:00:31,270 And that's essentially that code I showed you 8 00:00:31,270 --> 00:00:34,110 on this slide before. 9 00:00:34,110 --> 00:00:38,170 I add this content to my HTML file, 10 00:00:38,170 --> 00:00:40,500 and you can add it yourself, attached, 11 00:00:40,500 --> 00:00:44,870 you also find my index HTML file so that you can download it 12 00:00:44,870 --> 00:00:47,140 and replace yours with it. 13 00:00:47,140 --> 00:00:51,020 If you want to be sure that you are using the same code. 14 00:00:51,020 --> 00:00:53,700 And now, we can play around with that code 15 00:00:53,700 --> 00:00:58,010 and with JavaScript to tap into that DOM, 16 00:00:58,010 --> 00:01:01,800 into this JavaScript object representation 17 00:01:01,800 --> 00:01:04,873 of the parsed HTML code. 18 00:01:06,240 --> 00:01:07,450 And for that, 19 00:01:07,450 --> 00:01:11,300 we don't want to access the window object as a whole. 20 00:01:11,300 --> 00:01:14,660 But instead, this document property, 21 00:01:14,660 --> 00:01:17,780 which we got on that window object. 22 00:01:17,780 --> 00:01:21,753 This gives us access to this DOM, as I mentioned. 23 00:01:22,810 --> 00:01:27,810 Now, I also did mention that the entire window object, 24 00:01:28,360 --> 00:01:32,960 or all the properties and methods off that window object, 25 00:01:32,960 --> 00:01:37,280 are automatically made available globally 26 00:01:37,280 --> 00:01:40,330 as variables and functions, 27 00:01:40,330 --> 00:01:42,670 which is why we can access alert like this, 28 00:01:42,670 --> 00:01:47,130 instead of writing window.alert, which we also can do, 29 00:01:47,130 --> 00:01:49,030 but of course, that's shorter. 30 00:01:49,030 --> 00:01:51,540 And because that's the case, I, of course, 31 00:01:51,540 --> 00:01:54,490 don't have to write window.document, 32 00:01:54,490 --> 00:01:59,490 I can just write document to access this document property 33 00:02:00,020 --> 00:02:01,793 on the window object. 34 00:02:03,680 --> 00:02:07,430 And if I do that and saved as app.js file, 35 00:02:07,430 --> 00:02:12,250 in my browser, I see this dummy content which I added, 36 00:02:12,250 --> 00:02:14,000 which is not too important right now 37 00:02:14,000 --> 00:02:16,460 and which has no styling. 38 00:02:16,460 --> 00:02:18,280 But in this console, in the dev tools, 39 00:02:18,280 --> 00:02:21,600 I see this document thing, 40 00:02:21,600 --> 00:02:26,010 and as an extra nice feature here in Chrome, 41 00:02:26,010 --> 00:02:30,600 in the dev tools, when I hover over this document object, 42 00:02:30,600 --> 00:02:33,000 which is being output to the console, 43 00:02:33,000 --> 00:02:36,890 you see that the page on the left gets highlighted, 44 00:02:36,890 --> 00:02:40,370 because this document kind of represents 45 00:02:40,370 --> 00:02:45,370 this entire rendered displayed HTML code as I mentioned. 46 00:02:46,760 --> 00:02:48,820 Now, we can still expand this object 47 00:02:48,820 --> 00:02:52,600 because it still is a regular JavaScript object, 48 00:02:52,600 --> 00:02:57,600 just fulfilling a certain special purpose, so to say. 49 00:02:58,280 --> 00:03:01,810 And if I expand it, I get this. 50 00:03:01,810 --> 00:03:04,300 I see my HTML code here, 51 00:03:04,300 --> 00:03:08,920 which is just a certain way of displaying this in Chrome. 52 00:03:08,920 --> 00:03:10,570 And that can be confusing 53 00:03:10,570 --> 00:03:14,480 because data does not look like JavaScript code at all. 54 00:03:14,480 --> 00:03:18,030 Instead, that looks like regular HTML code, 55 00:03:18,030 --> 00:03:20,400 which at least proves my point, 56 00:03:20,400 --> 00:03:23,720 that this document object is our bridge 57 00:03:23,720 --> 00:03:26,153 to this DOM thing here. 58 00:03:27,090 --> 00:03:30,890 But, this also is confusing, because I want to clarify, 59 00:03:30,890 --> 00:03:33,990 that inside of this document thing here, 60 00:03:33,990 --> 00:03:36,990 we don't have HTML code. 61 00:03:36,990 --> 00:03:39,660 Instead, we have what I showed on this slide. 62 00:03:39,660 --> 00:03:44,450 We have an object with more properties and values. 63 00:03:44,450 --> 00:03:46,780 And to see this real object, 64 00:03:46,780 --> 00:03:51,460 we can use console.dir instead of console.log, 65 00:03:51,460 --> 00:03:53,210 which is simply a different way 66 00:03:53,210 --> 00:03:55,800 of outputting this to the console. 67 00:03:55,800 --> 00:03:59,540 And it is a way that will output the true object 68 00:03:59,540 --> 00:04:02,480 that is stored in this document thing. 69 00:04:02,480 --> 00:04:04,600 Instead of giving us this special way 70 00:04:04,600 --> 00:04:08,730 of displaying this object, which Chrome has built in. 71 00:04:08,730 --> 00:04:12,340 And when using console.dir, instead of console.log, 72 00:04:12,340 --> 00:04:16,930 if I now expand this, I see the real JavaScript object, 73 00:04:16,930 --> 00:04:21,550 because it is a standard JavaScript object in the end. 74 00:04:21,550 --> 00:04:24,180 And we see a bunch of properties in there, 75 00:04:24,180 --> 00:04:27,500 and we'll also find some methods in there. 76 00:04:27,500 --> 00:04:29,900 And we're going to work with a couple of properties 77 00:04:29,900 --> 00:04:32,500 and methods throughout this section 78 00:04:32,500 --> 00:04:34,173 and throughout this course. 79 00:04:35,170 --> 00:04:40,170 Now, most interesting right now, are two properties, 80 00:04:40,340 --> 00:04:42,620 which we find in there. 81 00:04:42,620 --> 00:04:47,620 If we search for H, we find this hat property. 82 00:04:48,540 --> 00:04:53,300 And if I expand that, we basically find all the information, 83 00:04:53,300 --> 00:04:58,130 the browser stored about our head section here, 84 00:04:58,130 --> 00:05:00,073 which is affecting this page. 85 00:05:01,160 --> 00:05:04,760 And for example, if I scroll down a bit, 86 00:05:04,760 --> 00:05:09,760 I find this children key here, and if I expand this, 87 00:05:10,740 --> 00:05:14,200 I find all the different head elements, 88 00:05:14,200 --> 00:05:17,880 which I indeed did add here in my hat section. 89 00:05:17,880 --> 00:05:21,840 Free meta elements, the title and the script. 90 00:05:21,840 --> 00:05:26,430 I find that here as well, which again, proves my point, 91 00:05:26,430 --> 00:05:31,430 that's that translation of our HTML code to JavaScript. 92 00:05:32,380 --> 00:05:35,640 And that's what the browser uses behind the scenes, 93 00:05:35,640 --> 00:05:37,630 to know what it should display 94 00:05:37,630 --> 00:05:39,573 and how it should display it. 95 00:05:40,940 --> 00:05:44,190 But more interesting than this head property, 96 00:05:44,190 --> 00:05:48,863 with all that stored information, is the body property. 97 00:05:49,860 --> 00:05:54,860 That holds all the information about the body HTML content 98 00:05:55,500 --> 00:05:57,373 and what the browser made of it. 99 00:05:58,250 --> 00:06:02,570 And in here, we also find this children property, 100 00:06:02,570 --> 00:06:06,660 which holds a list, an array, 101 00:06:06,660 --> 00:06:11,660 of all the HTML elements we have in our body. 102 00:06:11,980 --> 00:06:16,400 And that's this h1 element and this paragraph, 103 00:06:16,400 --> 00:06:17,800 and then also a script, 104 00:06:17,800 --> 00:06:22,140 which is actually injected by our life server extension, 105 00:06:22,140 --> 00:06:23,723 so not written by us. 106 00:06:24,860 --> 00:06:27,410 But here, we can then expand the paragraph 107 00:06:27,410 --> 00:06:30,680 and we find another nested object here. 108 00:06:30,680 --> 00:06:33,890 And you can tell objects and arrays apart 109 00:06:33,890 --> 00:06:35,920 by these index numbers. 110 00:06:35,920 --> 00:06:37,760 If you have these index numbers, 111 00:06:37,760 --> 00:06:40,660 then this here is an array. 112 00:06:40,660 --> 00:06:44,970 And if you have other property names, it's an object. 113 00:06:44,970 --> 00:06:48,500 And here we have all the data the browser gathered 114 00:06:48,500 --> 00:06:50,523 about this paragraph here, 115 00:06:51,500 --> 00:06:53,460 including more children, 116 00:06:53,460 --> 00:06:56,600 like this anchor element, in this case. 117 00:06:56,600 --> 00:06:58,330 And you see if I hover on that, 118 00:06:58,330 --> 00:07:01,443 it gets highlighted on the left, in my page. 119 00:07:03,160 --> 00:07:05,900 And that's a lot of useful information, 120 00:07:05,900 --> 00:07:09,760 which we can access through JavaScript to, 121 00:07:09,760 --> 00:07:13,890 for example, extract some value a user might have entered 122 00:07:13,890 --> 00:07:17,090 into an input field if we had one. 123 00:07:17,090 --> 00:07:20,830 And we can also manipulate that to, for example, 124 00:07:20,830 --> 00:07:23,950 change the styles or to see this as classes 125 00:07:23,950 --> 00:07:27,650 or the content of certain elements. 126 00:07:27,650 --> 00:07:30,763 And that's what we'll do in the next lectures.