1 00:00:00,150 --> 00:00:05,580 Welcome, this lesson is all about the JavaScript Dom, that's the JavaScript document object model, 2 00:00:05,700 --> 00:00:09,640 and it allows you to connect JavaScript to what's happening within your Web page. 3 00:00:09,960 --> 00:00:16,110 We're going to be examining what the DOM is and also allowing you to see the DOM and explore the don. 4 00:00:16,200 --> 00:00:19,050 So the DOM is sought for a document object model. 5 00:00:19,050 --> 00:00:22,620 It's a programming interface for HTML and XML documents. 6 00:00:22,830 --> 00:00:28,830 So basically what it does is it represents the page so that programs can change the document structure, 7 00:00:28,920 --> 00:00:33,480 style, content and so on, manipulate, interact with the page elements. 8 00:00:33,720 --> 00:00:37,470 So the DOM represents the document as nodes and objects. 9 00:00:37,650 --> 00:00:43,050 So we've got an example here on the right hand side, and this is a typical structure for the DOM. 10 00:00:43,050 --> 00:00:49,710 So we've got the document object, which contains the HTML element, and then we've got the head tags, 11 00:00:49,890 --> 00:00:51,690 the content contained within the head tags. 12 00:00:51,690 --> 00:00:56,970 So those are children of the parent and then the parent of the head is each HTML and the parent of the 13 00:00:56,970 --> 00:00:58,680 HTML is document. 14 00:00:58,890 --> 00:01:05,700 So it's represented within a tree like structure where we've got all of the different layers of HTML 15 00:01:05,700 --> 00:01:06,210 elements. 16 00:01:06,390 --> 00:01:10,950 And when you are writing HTML code, you will notice that you've got some elements that are contained 17 00:01:10,950 --> 00:01:16,830 within other elements and then some that are siblings of those elements so such as head and body. 18 00:01:16,830 --> 00:01:21,810 So they're siblings of each other because they're on the same level and you can navigate through all 19 00:01:21,810 --> 00:01:22,860 these different elements. 20 00:01:23,070 --> 00:01:27,840 Using JavaScript and JavaScript can change, remove all the time elements. 21 00:01:27,990 --> 00:01:34,650 Update attributes on the page can change CSF styles, make it look completely different and can react 22 00:01:34,650 --> 00:01:38,580 to existing events using event listeners and event handlers. 23 00:01:38,580 --> 00:01:44,490 And JavaScript can also create new events, create new elements and do a whole bunch of really cool, 24 00:01:44,490 --> 00:01:47,860 amazing things over at the Mozilla Developer Network. 25 00:01:47,880 --> 00:01:53,100 There's more information about the DOM, so if you want it to read up more about it, there's also some 26 00:01:53,190 --> 00:01:57,240 typical standards for implementing the DOM within most browsers. 27 00:01:57,390 --> 00:01:58,530 They have an example of it. 28 00:01:58,530 --> 00:02:01,230 And of course, we are going through this in the upcoming lessons. 29 00:02:01,410 --> 00:02:06,630 So ultimately what you need to do is select an element in order to use it in JavaScript. 30 00:02:06,720 --> 00:02:12,240 So you make your element selection and then you can update it and use it, utilize it within your code. 31 00:02:12,390 --> 00:02:15,210 And I'm going to be showing you tons of examples coming up. 32 00:02:15,210 --> 00:02:21,240 So JavaScript is ideal for working with the dorm as the dorm is one giant JavaScript object. 33 00:02:21,330 --> 00:02:26,820 And it works the same way where you can retrieve information, you can select information and you can 34 00:02:26,820 --> 00:02:28,040 update information. 35 00:02:28,320 --> 00:02:35,550 So here's a typical website where we've got the script content and interacting with content that's on 36 00:02:35,550 --> 00:02:36,120 the page. 37 00:02:36,240 --> 00:02:42,400 So it's creating an H2 one each one element and it's adding in content into that each one. 38 00:02:42,750 --> 00:02:49,290 So when the JavaScript runs and renders out, this body will then have the H1 tag within it with the 39 00:02:49,290 --> 00:02:51,120 content bighead inside of it. 40 00:02:51,340 --> 00:02:55,440 There's a lot of great examples of the DOM at the Mozilla Developer Network. 41 00:02:55,620 --> 00:03:00,200 And in this lesson, I'm also going to show you a quick way to see the dom of any Web page. 42 00:03:00,570 --> 00:03:03,540 So first you need to select the element that you want to use. 43 00:03:03,720 --> 00:03:09,120 And because all of the page elements are contained within the document object, this is the starting 44 00:03:09,120 --> 00:03:10,880 place for selecting elements. 45 00:03:11,040 --> 00:03:16,620 So that's why we use document and we're going to be referring to document in every single lesson coming 46 00:03:16,620 --> 00:03:16,800 up. 47 00:03:17,040 --> 00:03:20,190 So we're probably asking yourself, well, what is this document? 48 00:03:20,340 --> 00:03:26,580 And it is available on any webpage and all you have to do is open up your browser console and type in 49 00:03:26,580 --> 00:03:31,800 console dot directory, and we want to be able to traverse through it and look through it. 50 00:03:31,810 --> 00:03:36,840 So that's why we use directory and that gives us the ability to look through the different elements 51 00:03:36,840 --> 00:03:38,070 that are on the page. 52 00:03:38,340 --> 00:03:40,530 So let's take a closer look at what's available. 53 00:03:40,680 --> 00:03:43,410 And again, this is available at each and every Web page. 54 00:03:43,590 --> 00:03:50,940 So if you go to inspect, open up the console and type in console, it's console directory document. 55 00:03:51,180 --> 00:03:57,180 This will give you a look at what's contained within the first off, there's a lot of information contained 56 00:03:57,180 --> 00:04:02,460 in here, and every single piece of information that's within the Web page is contained within the document 57 00:04:02,460 --> 00:04:02,910 object. 58 00:04:02,910 --> 00:04:09,120 And as you can see, there are one thousand five hundred and forty eight different HTML collections 59 00:04:09,120 --> 00:04:09,600 listed. 60 00:04:09,660 --> 00:04:11,730 So that means there's a lot of stuff in there. 61 00:04:12,030 --> 00:04:14,820 And of course, this is the Mozilla Developer Network. 62 00:04:14,820 --> 00:04:17,460 So there is tons and tons of content on here. 63 00:04:17,550 --> 00:04:21,780 And so you can go through them and you can see all the different HTML elements. 64 00:04:21,990 --> 00:04:27,690 You can see the had all of the different links that are available on the page and also more information 65 00:04:27,690 --> 00:04:28,770 that's contained within these. 66 00:04:28,950 --> 00:04:30,810 So you can literally go through here. 67 00:04:30,810 --> 00:04:35,670 And this will probably take you a very long time to look through each and every one of these. 68 00:04:35,880 --> 00:04:39,870 And the good thing about it is that there's repetition. 69 00:04:39,870 --> 00:04:43,920 So there is consistency how we can access content within the DOM. 70 00:04:44,040 --> 00:04:45,540 So that makes it a little bit easier. 71 00:04:45,750 --> 00:04:50,880 So go over to your favourite website, open up your console and type in console directory. 72 00:04:51,000 --> 00:04:55,290 And I'll also show you within the example how you can output the page. 73 00:04:55,500 --> 00:04:58,260 So we are we are going to be working with. 74 00:04:58,490 --> 00:05:03,380 Starting HTML page that's got some random elements within it. 75 00:05:03,410 --> 00:05:12,470 So we've got an H1, a div unordered list and then we've got script touching to our apps JS file. 76 00:05:12,500 --> 00:05:17,000 So this is on the same directory so you can open that starter file up as well. 77 00:05:17,000 --> 00:05:23,450 So it's indexed HTML and then type in console directory and then accessing the document object. 78 00:05:23,630 --> 00:05:28,520 And you can see again more information that's contained within the page and you can go through and you 79 00:05:28,520 --> 00:05:32,020 can select the different elements and update the elements. 80 00:05:32,030 --> 00:05:36,440 And I'll just show you a quick one here where we're going to use query selector and we are going to 81 00:05:36,440 --> 00:05:38,320 be using this quite a bit coming up. 82 00:05:38,600 --> 00:05:41,900 So you select the different types of element tags. 83 00:05:42,140 --> 00:05:49,850 So you see when we do select it, it returns back the H1 and we can in the console hover over it. 84 00:05:49,850 --> 00:05:52,000 And it also highlights that within the page. 85 00:05:52,370 --> 00:06:00,230 And then also with JavaScript, you can update the entire text or the entire e-mail and wow, that was 86 00:06:00,470 --> 00:06:00,890 easy. 87 00:06:01,520 --> 00:06:07,550 So just with one line of code, with one statement, you can update any one of your HTML tags just like 88 00:06:07,550 --> 00:06:07,850 that. 89 00:06:07,970 --> 00:06:13,850 And then when you go back into the elements and if you go back to the HTML code, you can see that it's 90 00:06:13,850 --> 00:06:16,210 updated for this instance of the website. 91 00:06:16,520 --> 00:06:22,310 So the code hasn't actually changed, but we've updated what's available within the DOM and the DOM 92 00:06:22,310 --> 00:06:25,750 is the references, Tatian, of the content output on the page. 93 00:06:25,910 --> 00:06:30,890 So it's just not easy to update some of the content and we are going to be exploring this in more detail 94 00:06:30,890 --> 00:06:32,270 as we progress to the lessons. 95 00:06:32,360 --> 00:06:37,790 But you are welcome to try this out, as well as printing out the document object and taking a look 96 00:06:37,790 --> 00:06:40,040 at it, and you can be ready to move on to the next step. 97 00:06:40,730 --> 00:06:48,250 So now I've added in that HTML in our HTML update within the JavaScript file, as well as outputting 98 00:06:48,270 --> 00:06:51,320 of the console directory of the document object. 99 00:06:51,320 --> 00:06:57,620 And when now when we refresh it, we can see that the HTML updated via JavaScript, navigate through 100 00:06:57,620 --> 00:07:01,530 the document, object to take a closer look at the content that's contained within it. 101 00:07:01,910 --> 00:07:06,380 So if you add it into your JavaScript, you're going to see that you have access to the document object. 102 00:07:06,420 --> 00:07:07,580 So try it out for yourself.