1 00:00:00,060 --> 00:00:04,770 Here in this lesson, we're going to be reviewing how to interact with the dorm content, so that's 2 00:00:04,770 --> 00:00:07,560 updating the page content using JavaScript. 3 00:00:07,830 --> 00:00:14,490 So accessing the document object, selecting elements from that document object using query selector 4 00:00:14,640 --> 00:00:19,860 and then iterating through, looping through them and also making updates to that content. 5 00:00:20,130 --> 00:00:27,960 So just a quick practice lesson about how to interact with JavaScript code and make manipulations to 6 00:00:27,960 --> 00:00:33,510 the dawn content going over some of the JavaScript functionality that we're going to be covering and 7 00:00:33,510 --> 00:00:36,010 that's going to be essential for the upcoming lessons. 8 00:00:36,330 --> 00:00:42,390 So one of them is to interact with the page elements and we're going to be relying on the document object 9 00:00:42,390 --> 00:00:42,770 model. 10 00:00:42,990 --> 00:00:45,860 So that's the JavaScript document object model. 11 00:00:45,870 --> 00:00:52,830 And what this is, is that's short Dom, and it connects Web pages to programming languages. 12 00:00:52,980 --> 00:00:59,730 And essentially it's what is built by the browser and it represents all of the elements on the page. 13 00:00:59,910 --> 00:01:06,210 So you can see every single Web page is going to have the document object model constructed and using 14 00:01:06,210 --> 00:01:11,360 JavaScript we can interact with the content contained within the document object model. 15 00:01:11,610 --> 00:01:13,850 So I'm running the page. 16 00:01:13,860 --> 00:01:20,430 So each HTML page here and this is just a basic HTML show that we can use in order to interact with 17 00:01:20,430 --> 00:01:21,330 DOM content. 18 00:01:21,600 --> 00:01:23,850 So there are some elements on the page. 19 00:01:23,860 --> 00:01:30,660 There's an H1 tag, there's a div tag and then there's a script tag linking to script one as I've opened 20 00:01:30,660 --> 00:01:33,930 up the console and in order to see the content. 21 00:01:36,260 --> 00:01:43,670 Contained within the document object, you can use the directory method and then just list out the document. 22 00:01:46,990 --> 00:01:54,370 Into the directory, and that will show the document object within the console and from here you can 23 00:01:54,370 --> 00:01:58,360 open it up and you can see that there's quite a bit of information contained in here. 24 00:01:58,630 --> 00:02:02,490 So you can get things like the Web, you are all of that document. 25 00:02:02,800 --> 00:02:11,110 So if you want to output the console log and using the document object and return back to you earlier, 26 00:02:11,830 --> 00:02:15,440 you can put that into a JavaScript value. 27 00:02:15,490 --> 00:02:21,620 So that's just the euro and then you can do the same thing for any Web page that you're on. 28 00:02:21,850 --> 00:02:28,420 So even if I go over to the Mozilla Web page, I do an inspect, open up the console and do a console 29 00:02:28,420 --> 00:02:29,890 log of the document URL. 30 00:02:30,010 --> 00:02:32,500 I'm going to get whatever the current document you URLs. 31 00:02:32,770 --> 00:02:38,070 And you can also do this for any Web page and list the document content. 32 00:02:38,470 --> 00:02:42,690 And here there's quite a lot of HTML elements. 33 00:02:42,700 --> 00:02:45,220 There's one thousand four hundred and seventy nine. 34 00:02:45,400 --> 00:02:49,720 So that lists out all of the page elements that are currently on the page. 35 00:02:50,050 --> 00:02:54,670 And with the JavaScript now we can select and we can interact with any one of these. 36 00:02:54,850 --> 00:02:56,370 And there's also that listener. 37 00:02:56,380 --> 00:03:00,490 So I'm going to be going over some of the that listeners and mainly we're going to be using the click 38 00:03:00,490 --> 00:03:00,820 event. 39 00:03:01,270 --> 00:03:04,720 But there's quite a few other different event listeners that you can make use of. 40 00:03:04,900 --> 00:03:09,640 You can also navigate through the dorms so you can go to the siblings, you can go to the children. 41 00:03:09,760 --> 00:03:15,300 And they're all listed here within the DOM elements and represent within the DOM structure. 42 00:03:15,550 --> 00:03:21,580 So my page, because this HTML object is fairly simple and straightforward, there's only nine main 43 00:03:21,580 --> 00:03:22,900 elements on the page. 44 00:03:22,900 --> 00:03:28,900 So that's the HTML that had the title, the style, the body that each one, the div, the script tags 45 00:03:28,900 --> 00:03:32,920 as well are included and you can select any of these. 46 00:03:32,920 --> 00:03:35,820 So within each HTML collection there's a hierarchy. 47 00:03:35,980 --> 00:03:38,170 So at the top there's the HTML tag. 48 00:03:38,170 --> 00:03:41,050 So it corresponds with what our source code is. 49 00:03:41,290 --> 00:03:45,070 And then within here there's a listing of children. 50 00:03:45,070 --> 00:03:51,430 So within the main HTML there's three children, which is the head the text up here at the top and then 51 00:03:51,430 --> 00:03:51,810 body. 52 00:03:52,060 --> 00:03:59,320 So this text is just representing the spacing that I have within the content and I've only got the one 53 00:03:59,320 --> 00:04:03,330 return within head and then as well I could remove that out. 54 00:04:03,580 --> 00:04:09,940 So once the carriage return is removed, if we go back into the children of the HTML object and then 55 00:04:09,940 --> 00:04:13,960 go down to the children, you're going to see that there's just head and body. 56 00:04:14,140 --> 00:04:18,580 So those are the main elements that we have that are nested within the HTML. 57 00:04:18,730 --> 00:04:23,470 And then also if you go into the body that you're going to see the three children that we have within 58 00:04:23,470 --> 00:04:23,950 the body. 59 00:04:24,220 --> 00:04:30,400 So we've got the H1 tag, we've got the div, and then we've got the script tags as well within the 60 00:04:30,400 --> 00:04:30,730 body. 61 00:04:31,510 --> 00:04:37,150 And that's the difference between the child nodes and the HTML collection, is that the child nodes 62 00:04:37,150 --> 00:04:41,110 will as well include any of the spacing that you have within the source code. 63 00:04:42,490 --> 00:04:48,610 So interacting with the document object, there's also the Windows object, so the Windows object actually 64 00:04:48,760 --> 00:04:51,960 sits outside and it contains the document object. 65 00:04:52,150 --> 00:04:58,000 So this is the main window interface and it represents the whole window as opposed to just the document 66 00:04:58,000 --> 00:04:58,500 object. 67 00:04:58,660 --> 00:05:04,420 And there are some methods that are available within the window, such as commonly used. 68 00:05:04,420 --> 00:05:11,440 There's the window alert as well as other window options where you can scroll to a certain location 69 00:05:11,440 --> 00:05:12,260 within the window. 70 00:05:12,520 --> 00:05:19,710 So if you want it to scroll up and using the scroll, why this can set the scroll position of the window 71 00:05:20,200 --> 00:05:23,960 and this will reset the scroll position back to zero. 72 00:05:24,370 --> 00:05:30,700 So if we want to scroll down the page and then we run the window scroll, why function? 73 00:05:30,850 --> 00:05:32,860 That's going to reset it back to zero. 74 00:05:34,940 --> 00:05:42,980 And that's all available within the default build of your Web page within the browser, so let's interact 75 00:05:42,980 --> 00:05:47,040 with some of the content that we have available within the window. 76 00:05:47,300 --> 00:05:52,820 And if you want to make a selection of the elements on the page and we do have the H1 and I'm also going 77 00:05:52,820 --> 00:05:58,490 to add in a second div and we'll add in some content within the device or one and two. 78 00:05:58,880 --> 00:06:02,150 Let's make a selection of each one. 79 00:06:02,360 --> 00:06:07,910 And the same way that you make a selection with styling, you can select the element from the page using 80 00:06:07,910 --> 00:06:11,160 the contents that are contained within the document object. 81 00:06:11,180 --> 00:06:20,840 So creating an each tag variable and then using the document object, making a selection, you can use 82 00:06:20,840 --> 00:06:26,300 the method query selector and then you just have to specify how you're making the selection. 83 00:06:26,510 --> 00:06:33,260 And in this case, we're going to use the tags the same way as we did with success and making the selection 84 00:06:33,260 --> 00:06:34,070 of the element. 85 00:06:34,310 --> 00:06:40,750 And now we can use that element as a variable value of each tag. 86 00:06:41,210 --> 00:06:45,870 And when you hover over it within the console, it's going to highlight that element. 87 00:06:46,220 --> 00:06:52,760 So if you are using the query selector and there's more than one matching return item, so if you want 88 00:06:52,760 --> 00:06:59,990 to select the div, let's make a selection of the div and this is going to be the div tag. 89 00:07:00,560 --> 00:07:03,740 And what do you think is going to be returned back? 90 00:07:03,740 --> 00:07:09,710 If we're only selecting the div, we've got more than one div and what's going to happen is it's going 91 00:07:09,710 --> 00:07:13,500 to select the first occurrence of that matching selection. 92 00:07:13,970 --> 00:07:19,180 So just like which is different than what we would expect with styling. 93 00:07:19,220 --> 00:07:22,460 So if we added the selection of a div. 94 00:07:23,760 --> 00:07:29,630 It's automatically going to be applying it to all of the matching dips, where is if we use query selector, 95 00:07:29,630 --> 00:07:35,130 we're only get the first matching result, which at this moment is going to be the one that has the 96 00:07:35,130 --> 00:07:36,610 text value of one. 97 00:07:36,900 --> 00:07:44,310 There's also query selector all, and there is more information available about the query selector over 98 00:07:44,310 --> 00:07:46,180 at the Mozilla Developer Network. 99 00:07:46,200 --> 00:07:52,770 So they do have some examples and it's document method available within the document object and it returns 100 00:07:52,770 --> 00:07:58,320 the first element within the documentation that matches the selector, a group of selectors, and if 101 00:07:58,320 --> 00:08:01,030 no matches are found, then it returns back null. 102 00:08:01,350 --> 00:08:06,780 So even if you don't have the matching selection, you're still going to get a response back in. 103 00:08:06,780 --> 00:08:10,410 That value is going to be a response of not of null. 104 00:08:10,560 --> 00:08:16,650 So if we were to select H2, which we don't have on the page, we do get a value of null being returned 105 00:08:16,650 --> 00:08:19,070 back into the console for that variable. 106 00:08:19,590 --> 00:08:27,180 So with query selector, we can make a selection of all of the divs and using the query selector all 107 00:08:27,180 --> 00:08:27,710 method. 108 00:08:27,930 --> 00:08:33,310 So that's going to be different and that's going to create a node list of all of the matching results. 109 00:08:33,540 --> 00:08:36,590 So in this case, we're going to have two results for DIV. 110 00:08:36,840 --> 00:08:43,980 And if we log out the return value for Divs, you're going to see that we're able to select all of the 111 00:08:43,980 --> 00:08:45,000 matching elements. 112 00:08:45,360 --> 00:08:52,890 And just as we saw with when we're selecting it and we're logging out the device and we hover over them 113 00:08:52,890 --> 00:08:55,260 within the console, the same thing happens here. 114 00:08:55,300 --> 00:09:00,780 Whenever we hover over it, we see it getting highlighted up at the top within the display area of the 115 00:09:00,780 --> 00:09:01,260 browser. 116 00:09:01,260 --> 00:09:05,280 So that's up at the top and returning back to matching dips. 117 00:09:07,420 --> 00:09:15,460 And the reason that we can use CONSED is that these are representing just as the document object, it 118 00:09:15,460 --> 00:09:17,340 represents a memory location. 119 00:09:17,680 --> 00:09:24,010 So the actual variable that we're using to define it stays the same, but we're just referencing that 120 00:09:24,010 --> 00:09:25,020 memory location. 121 00:09:25,240 --> 00:09:33,010 So even if we were to take the H1 and we were to make an update to that H1 tag, and because we've selected 122 00:09:33,010 --> 00:09:37,630 it as the each tag, this represents the selection of this object. 123 00:09:37,780 --> 00:09:41,040 And within our code, each tag will represent that object. 124 00:09:41,410 --> 00:09:48,630 We can update contents of it by doing text content and then updating whatever we want for the content. 125 00:09:49,180 --> 00:09:54,940 So you'll see that now this has been updated and changed because we've made the selection and update 126 00:09:54,940 --> 00:09:59,400 of the page content and within the elements, within the live data. 127 00:09:59,590 --> 00:10:06,640 This is the new updated source code, whereas it's different than our initial source code because we've 128 00:10:06,670 --> 00:10:08,480 updated and changed it with JavaScript. 129 00:10:08,800 --> 00:10:15,670 So when the JavaScript code loads, it updates the code that's available within the. 130 00:10:18,700 --> 00:10:25,330 Within the dorm, and this is only updated within the dorm, so if the JavaScript file doesn't run, 131 00:10:25,330 --> 00:10:26,950 then it's not going to update the code. 132 00:10:27,130 --> 00:10:33,670 And just as we're able to select the element and update the valot, the property value, we can also 133 00:10:33,670 --> 00:10:37,670 see the current property value that is associated with it. 134 00:10:37,900 --> 00:10:45,490 So if we were to log that out into the console, we would see the current value for whatever the the 135 00:10:46,300 --> 00:10:49,300 value property value is of text content. 136 00:10:50,200 --> 00:10:54,910 No list will act similar to what we have with an array where we've got a link. 137 00:10:55,060 --> 00:11:00,400 So if we want to output the contents of the node list and we've got that contained within divs, we 138 00:11:00,400 --> 00:11:06,160 can take the device and using the for each method will allow us to loop through and iterate through 139 00:11:06,160 --> 00:11:07,100 all of the values. 140 00:11:07,430 --> 00:11:13,000 There's an example and some more information about the for each method available at the Mozilla developer 141 00:11:13,000 --> 00:11:13,450 network. 142 00:11:13,450 --> 00:11:19,360 And basically what foreach does is it's a method that executes that provided function once for each 143 00:11:19,390 --> 00:11:20,830 item within the array. 144 00:11:21,100 --> 00:11:23,680 So what's happened here is it's looping through. 145 00:11:23,800 --> 00:11:26,240 It's returning the value back as element. 146 00:11:26,350 --> 00:11:28,660 And right now it's just logging in into the console. 147 00:11:28,960 --> 00:11:35,890 And also for the upcoming lessons, we are going to be using the JavaScript Arrow format for functions. 148 00:11:36,370 --> 00:11:40,330 So this is different than running the function method. 149 00:11:40,330 --> 00:11:43,390 So it does the same thing, but just the syntax is different. 150 00:11:43,660 --> 00:11:47,350 So I'll give you a quick example of the syntax for each one. 151 00:11:47,560 --> 00:11:54,610 So the syntax for just the longer version where we're writing out the function word and then returning 152 00:11:54,610 --> 00:11:55,690 back the element. 153 00:11:58,130 --> 00:12:04,920 And we could console log the value of each element into the console. 154 00:12:05,450 --> 00:12:07,930 So that would return back this type of result. 155 00:12:08,360 --> 00:12:11,770 And as mentioned, we are going to be using the Arrow format. 156 00:12:12,050 --> 00:12:17,960 So it's going to be slightly shorter and you can really shorten the Arrow format without even having 157 00:12:17,960 --> 00:12:19,580 the return. 158 00:12:22,720 --> 00:12:26,560 So if you have a one line statement, you can add it in this way. 159 00:12:30,250 --> 00:12:36,150 And that's going to do the same thing where it loops through and it iterates through the object details 160 00:12:36,520 --> 00:12:42,370 and one last one, that typically the way that we're doing it is that we're adding in the extra brackets. 161 00:12:42,550 --> 00:12:46,300 So just so it's a little bit easier to read, but these are optional. 162 00:12:46,990 --> 00:12:53,620 So if you choose to not add in the brackets, that's that's proper coding as well. 163 00:12:53,800 --> 00:12:56,530 So all of these three are going to be doing the same thing. 164 00:12:56,710 --> 00:13:02,020 And for most part, the way that we are going to be writing the code is we're going to be using this 165 00:13:02,020 --> 00:13:02,890 type of format. 166 00:13:03,640 --> 00:13:09,250 And also within the for each function, we can return back the index as well as we can return back the 167 00:13:09,250 --> 00:13:10,030 full array. 168 00:13:10,270 --> 00:13:17,000 And that's going to be the array or the object contents that are added in within divs as a whole. 169 00:13:17,290 --> 00:13:24,970 So if we want to output those and use them, as are, we can see that we list out the value of the node 170 00:13:24,970 --> 00:13:28,860 list down here at the bottom, which is actually going to be the same as dips. 171 00:13:29,080 --> 00:13:35,680 And once again, to reiterate that this is pointing to a memory location and that's why we're able to 172 00:13:35,680 --> 00:13:40,720 assign multiple variable values that are linking to that location. 173 00:13:40,930 --> 00:13:48,100 And it because this is within an object, this variable value, as long as you're not changing the link 174 00:13:48,100 --> 00:13:54,070 to that object itself, you can update or manipulate the contents of the object. 175 00:13:54,370 --> 00:14:02,680 So if we were to loop through and we select the element and just as we saw up here, we're updating 176 00:14:03,010 --> 00:14:05,620 the text content of each element. 177 00:14:08,970 --> 00:14:17,610 And adding it together and just putting the index value, now we're updating the content as we're looping 178 00:14:17,610 --> 00:14:24,770 through and the URL is referencing whatever the current div is that we're on with the index value. 179 00:14:24,960 --> 00:14:30,080 And it's also still referencing the same way where we selected the first div. 180 00:14:30,330 --> 00:14:37,710 So either way of these references are able to return back the div content and the idea is the same if 181 00:14:37,710 --> 00:14:44,830 we say Divs and we use the index value and then update the text content for that. 182 00:14:46,500 --> 00:14:54,910 And this can just say hello one and then divs with an index value of one can say hello to. 183 00:14:56,430 --> 00:15:03,060 So at the end we end up with Halo one and hello to as we're referencing the element object. 184 00:15:03,630 --> 00:15:09,540 And for the upcoming lessons, it is going to be important to understand how to access and manipulate 185 00:15:09,540 --> 00:15:10,650 the DOM content. 186 00:15:10,800 --> 00:15:17,370 As we do get the chasten data, we're going to be making use of the JSON data and manipulating the page 187 00:15:17,370 --> 00:15:20,930 element and the DOM content with JavaScript. 188 00:15:21,840 --> 00:15:29,250 So try it out and select some content from your page using the document query selector and then make 189 00:15:29,250 --> 00:15:36,750 some manipulations, update the text content of the element and also iterate through if you have multiple 190 00:15:36,900 --> 00:15:42,660 occurrences of that element and output them into the console and you'll be ready to move on to the next 191 00:15:42,660 --> 00:15:43,050 lesson.