1 00:00:00,750 --> 00:00:04,950 All right guys in the last video we talked about the document object model and what it is. 2 00:00:04,990 --> 00:00:06,900 Now I want to dive into it now. 3 00:00:07,020 --> 00:00:11,370 There's a lot to cover what I want to do in this video is just look at some of the properties of the 4 00:00:11,370 --> 00:00:12,730 document object. 5 00:00:12,840 --> 00:00:18,390 In the last video of the last section we briefly looked at the window object which is basically the 6 00:00:18,390 --> 00:00:20,830 global object of the browser environment. 7 00:00:20,970 --> 00:00:25,680 And we saw that document is actually a property of that window object. 8 00:00:25,680 --> 00:00:30,960 So what I want to do now is examine that document object a little bit not so much the methods that it 9 00:00:30,960 --> 00:00:35,110 offers but the properties which are basically like attributes of it. 10 00:00:35,190 --> 00:00:41,430 Now in the next video we're going to look at selectors like get element by ID which are methods of the 11 00:00:41,430 --> 00:00:42,500 document object. 12 00:00:42,510 --> 00:00:45,250 But in this video we're going to look at some of the properties. 13 00:00:45,450 --> 00:00:50,850 OK I'm going to show you how we can select elements directly but doing it this way isn't recommended 14 00:00:50,850 --> 00:00:55,800 because there's easier ways using selectors which like I said we'll get into in the next video. 15 00:00:55,890 --> 00:01:01,710 But I do think that you should at least know that that's a possibility and know how that works. 16 00:01:01,710 --> 00:01:06,390 All right now you're probably wondering what this user interface is on the side over here. 17 00:01:06,420 --> 00:01:09,870 This is what we're going to use to do our exploration for this section. 18 00:01:09,900 --> 00:01:12,770 It gives us a dorm tree to work with and explore. 19 00:01:12,780 --> 00:01:18,450 Now the section after this will be our first project section will actually build three different projects 20 00:01:18,870 --> 00:01:25,490 and the first one will be creating this application making this work so that we can actually add a task. 21 00:01:25,560 --> 00:01:31,140 It will get put down here we'll be able to delete them clear them we'll even implement local storage. 22 00:01:31,290 --> 00:01:33,360 But right now this is just each team. 23 00:01:33,360 --> 00:01:39,390 All this is just UI doesn't actually do anything but we're going to use this as our interface to explore 24 00:01:39,390 --> 00:01:46,830 the dorm and learn about it learn about selectors how to traverse up and down the dorm how to add things 25 00:01:46,830 --> 00:01:50,710 remove things replace things all kinds of stuff. 26 00:01:50,730 --> 00:01:56,870 All right and this is all stuff that people use J queery for NJ Cory is not needed. 27 00:01:56,970 --> 00:02:03,150 With the advancements of javascript and you're going to see that in this video in this section now as 28 00:02:03,150 --> 00:02:08,790 far as the UI when we get to the actual project in the next section we're going to we're going to hand-code 29 00:02:08,880 --> 00:02:10,090 all the each team. 30 00:02:10,290 --> 00:02:16,710 But for now you just you can just grab it from your project files and use that file and I'll just quickly 31 00:02:16,710 --> 00:02:17,340 go over it. 32 00:02:17,340 --> 00:02:21,530 So we're using materialized CSSA which is CSSA framework. 33 00:02:21,660 --> 00:02:23,550 We're just including the Cdn. 34 00:02:23,550 --> 00:02:24,830 We're also using the font. 35 00:02:24,840 --> 00:02:28,420 Awesome CDN so that we can have these delete icons. 36 00:02:28,440 --> 00:02:31,520 All right then down here we just have basically a card. 37 00:02:31,560 --> 00:02:38,880 OK this whole box it's wrapped in a materialized card and we have a little form here with a button a 38 00:02:38,880 --> 00:02:40,070 task list. 39 00:02:40,240 --> 00:02:45,060 OK so this is actually a UL which is right here. 40 00:02:45,240 --> 00:02:51,310 So you well with the class of collection and then each list item has a class of collection item. 41 00:02:51,510 --> 00:02:58,110 And then inside there we have some text which is all the same for each one and then we have a link which 42 00:02:58,470 --> 00:03:01,710 has inside of that in icon from font. 43 00:03:01,730 --> 00:03:04,140 Awesome which is just this X mark. 44 00:03:04,170 --> 00:03:09,540 All right so it's a pretty simple UI and we just have the clear tasks at the bottom and then we have 45 00:03:09,600 --> 00:03:15,630 for javascript we have Jay queery included only because it's a dependency of material eyes which is 46 00:03:15,630 --> 00:03:16,510 right here. 47 00:03:16,530 --> 00:03:19,740 We're not using Jay query at all in this course. 48 00:03:19,740 --> 00:03:25,980 OK that's that's the point of this course is to get use to get developers away from a query and into 49 00:03:25,980 --> 00:03:28,350 just using phenolic javascript. 50 00:03:28,350 --> 00:03:28,830 All right. 51 00:03:28,830 --> 00:03:34,520 And then maybe moving on to a framework like reactor angular and then of course we're including our 52 00:03:34,530 --> 00:03:35,840 app J.S. file. 53 00:03:35,870 --> 00:03:36,210 All right. 54 00:03:36,210 --> 00:03:40,150 So let's jump into our app Julius which is completely empty at the moment. 55 00:03:40,620 --> 00:03:48,690 Now as you saw in the last section of the last video the last section where we looked at window we can 56 00:03:48,690 --> 00:03:53,460 look at all the things included in the window object and document is one of them. 57 00:03:53,670 --> 00:03:56,520 OK so this is what we're going to be exploring. 58 00:03:56,730 --> 00:04:01,250 So we can call document Daut in any of this stuff here. 59 00:04:01,260 --> 00:04:04,210 So let's go over here in J.S.. 60 00:04:04,230 --> 00:04:10,770 And what I'm going to do is just initialize a variable called Val not going to assign it to anything 61 00:04:10,770 --> 00:04:15,540 at first just initialize it and then do a console log down here. 62 00:04:15,540 --> 00:04:20,430 That way you don't have to do a bunch of console logs throughout the throughout this script. 63 00:04:20,430 --> 00:04:28,110 We can just set things to Vau and it'll it'll just re-assign from the next one and keep going down. 64 00:04:28,110 --> 00:04:28,410 All right. 65 00:04:28,410 --> 00:04:35,140 So first thing I'm going to do is assign Val equal to documents. 66 00:04:35,240 --> 00:04:35,850 Right. 67 00:04:35,940 --> 00:04:38,370 And let's save that and see what it gives us. 68 00:04:38,400 --> 00:04:40,990 So it gives us the entire document. 69 00:04:40,980 --> 00:04:46,400 So from the doctype which if we look at index aged him and we go up to the top. 70 00:04:46,590 --> 00:04:52,940 So from the doctype down to the bottom ending each time I'll tag so the entire thing and everything's 71 00:04:52,950 --> 00:04:53,570 included. 72 00:04:53,560 --> 00:04:55,450 You can see we have our head and body. 73 00:04:55,590 --> 00:05:01,080 If we go ahead and extend the head we can see everything in there we can see everything inside the body. 74 00:05:01,160 --> 00:05:06,890 So that's what just the document gives us if we were to if you if we look at that now when working with 75 00:05:06,890 --> 00:05:10,500 the dorm we have different types of structures that we can get. 76 00:05:10,520 --> 00:05:16,910 So for instance in each team collection which is kind of like an array but kind of not it's formatted 77 00:05:16,910 --> 00:05:23,420 like an array with brackets and comma separated values but you can't use for instance a for each loop 78 00:05:23,420 --> 00:05:25,310 on it which is an array method. 79 00:05:25,310 --> 00:05:32,060 And then you have node lists for example which are also like arrays but you can use for each loops on 80 00:05:32,060 --> 00:05:32,270 them. 81 00:05:32,270 --> 00:05:34,810 So we're going to go over all that stuff later on. 82 00:05:34,820 --> 00:05:40,310 But just to let you know if you want to select if you want to basically get an array. 83 00:05:40,590 --> 00:05:44,380 I'm sorry an aged him old collection from the entire document. 84 00:05:44,390 --> 00:05:46,550 You can do document at all. 85 00:05:46,580 --> 00:05:52,830 So if you take a look at what that gives us for some reason when I try to expand that it doesn't work. 86 00:05:52,850 --> 00:05:58,760 But you can see from here that it's it looks like an array it's in brackets we have h t m l head matter 87 00:05:58,820 --> 00:05:59,900 matter matter. 88 00:05:59,970 --> 00:06:06,830 So it's starting at the top of the document which if we look at our aged him now starting with the not 89 00:06:06,830 --> 00:06:12,830 the doctype but the first element which has aged him now then the head tag then the mete then another 90 00:06:12,830 --> 00:06:17,090 matter three matters and then the length tag and it's just going to keep going down. 91 00:06:17,120 --> 00:06:18,860 So that gives us a collection. 92 00:06:18,980 --> 00:06:27,430 Now just like with an array you can access certain indexes so if we want the first one it's zero base 93 00:06:27,440 --> 00:06:28,370 just like an array. 94 00:06:28,370 --> 00:06:38,110 So we can say all 0 and let's go ahead and save that reload and you can see it gives us the HTML element. 95 00:06:38,270 --> 00:06:43,340 If we do one that gives us the head if we do too. 96 00:06:43,600 --> 00:06:45,560 I'm sure you can guess what that will give us. 97 00:06:45,580 --> 00:06:51,100 It will give us this medal tag here so if we save and look it gives us that first attack. 98 00:06:51,140 --> 00:06:59,650 So you can access indexes or items in the collection like like you would with an array. 99 00:06:59,660 --> 00:07:05,930 All right so next thing I want to do is actually I want to show that we can do properties as well so 100 00:07:05,930 --> 00:07:09,530 we could do like length and save. 101 00:07:09,530 --> 00:07:13,700 And that shows us that there's 43 elements in the dorm. 102 00:07:13,700 --> 00:07:19,520 Now if I were to go to the index file and let's delete like let's say the input and save. 103 00:07:19,520 --> 00:07:24,460 Now we have 42 so that account all of the elements in the dorm. 104 00:07:24,590 --> 00:07:28,560 Now we can also access for instance the head alone. 105 00:07:28,630 --> 00:07:32,520 We say document dog head that will give us just the head. 106 00:07:32,540 --> 00:07:34,880 We can also do the body. 107 00:07:35,870 --> 00:07:40,220 OK that will give us the body we can get things like the doc type 108 00:07:43,950 --> 00:07:48,760 so if we say document doctype it shows the age to him or five doctype. 109 00:07:48,800 --> 00:07:57,380 If we were using Exige Tamal it would show us that doctype we can get the domain so domain will give 110 00:07:57,380 --> 00:08:01,450 me the loopback address because I'm on my local host. 111 00:08:01,580 --> 00:08:04,940 We can also do you R-AL that give. 112 00:08:04,940 --> 00:08:11,090 That will give you the whole thing including the protocol and the port and the page we can get the character 113 00:08:11,090 --> 00:08:14,420 set. 114 00:08:14,670 --> 00:08:19,930 All right so if you ever need any of these things in your application you can easily access and we can 115 00:08:19,930 --> 00:08:22,920 get the content type. 116 00:08:23,380 --> 00:08:28,470 So Content-Type this is an aged page so we'll get text slash aged him. 117 00:08:28,870 --> 00:08:31,150 All right so enough of those types of properties. 118 00:08:31,150 --> 00:08:36,880 Now I want to show you that we can actually select stuff without using selectors. 119 00:08:36,970 --> 00:08:39,220 It's not recommended but it is possible. 120 00:08:39,220 --> 00:08:47,250 So for example if we wanted to get all the forms on the page we could do document Daut forms and save 121 00:08:47,260 --> 00:08:50,310 and you'll see we get an age female collection. 122 00:08:50,320 --> 00:08:56,230 And if I expand this you'll see that it's in aged team or collection and it has one form with the index 123 00:08:56,230 --> 00:08:58,800 of 0 and that's this form here. 124 00:08:58,810 --> 00:09:03,800 If I were to add another form to the aged him at all it would have another one with the index of one 125 00:09:04,480 --> 00:09:12,370 and I can access just this form if I wanted to by simply adding an index of zero. 126 00:09:12,580 --> 00:09:20,080 And now it gives me the form OK cry if I were to do form one it's going to give me undefine because 127 00:09:20,080 --> 00:09:22,900 there is no form at that index. 128 00:09:22,900 --> 00:09:24,140 All right. 129 00:09:24,280 --> 00:09:28,840 So another thing we can do is we can get stuff from that form we want. 130 00:09:28,840 --> 00:09:33,670 So if we were to say form zero we could do dot ID. 131 00:09:33,970 --> 00:09:42,610 And that gives us the ID we could get the method for example forms have methods like get and post can 132 00:09:42,610 --> 00:09:43,770 see that it's get. 133 00:09:44,140 --> 00:09:52,660 We can do the action which doesn't have one but if I were to go to the forum tag in each team and say 134 00:09:52,660 --> 00:10:01,510 action equals let's say Index start ph P and save it'll give me that index p p file. 135 00:10:02,110 --> 00:10:02,920 OK. 136 00:10:03,460 --> 00:10:05,520 We can also do this with links. 137 00:10:05,530 --> 00:10:12,610 So for example if we want to say Val equals document links and you can see it gives us a collection 138 00:10:12,610 --> 00:10:18,190 with six links and it's it's show it's showing these five links here. 139 00:10:18,190 --> 00:10:25,750 And then this one here you see the last one is the clear Tass and we can access certain links. 140 00:10:26,140 --> 00:10:29,650 So if we were to say zero. 141 00:10:29,770 --> 00:10:34,420 That will give us the first one if I hover over it you'll see it'll highlight in the dorm or in the 142 00:10:34,420 --> 00:10:41,110 browser appear and I can also get things like the ID. 143 00:10:41,320 --> 00:10:47,720 I don't think it has an I.D. So it's not going to give me anything I could get the classes. 144 00:10:47,800 --> 00:10:54,280 So if I do class name that gives you a string of all the classes we have delete item and secondary content. 145 00:10:54,430 --> 00:10:59,080 If we look in each team will delete item and secondary content. 146 00:10:59,080 --> 00:11:07,790 Now you can also get a collection of classes and you can do that with class list. 147 00:11:08,310 --> 00:11:12,780 There should be a dog class list and you see we get in a collection. 148 00:11:12,790 --> 00:11:17,070 Actually it's it's dawn tokin list of the different classes. 149 00:11:17,170 --> 00:11:22,690 And if you wanted to access a specific one you could put an index like let's say we want to delete item 150 00:11:23,140 --> 00:11:27,050 we'll save that and we'll get that specific class. 151 00:11:27,070 --> 00:11:27,380 All right. 152 00:11:27,400 --> 00:11:30,590 So let's see if we can also do this with images. 153 00:11:30,730 --> 00:11:36,440 So if we say document the dot images now we don't have any images. 154 00:11:36,520 --> 00:11:43,100 So what it's going to give us is an empty collection but if we did they'd be putting that in their collection. 155 00:11:43,150 --> 00:11:46,340 We can do the same thing with scripts. 156 00:11:47,230 --> 00:11:49,570 So this will give us all the scripts that are linked. 157 00:11:49,570 --> 00:11:53,770 We have three of them so it's talking about these three down here. 158 00:11:53,770 --> 00:12:02,420 So Jay query materialized in our app Jay X-File now we can also get attributes. 159 00:12:02,440 --> 00:12:06,530 So let's say we wanted to get one of these scripts. 160 00:12:08,290 --> 00:12:17,650 So scripts Let's take the stake to which will be at J S and let's do get attribute and say we want to 161 00:12:17,650 --> 00:12:19,640 get the source attribute. 162 00:12:20,350 --> 00:12:23,210 So if we save it that should give us apt J. 163 00:12:23,740 --> 00:12:25,420 Because it's the third script. 164 00:12:25,420 --> 00:12:26,170 This one here. 165 00:12:26,190 --> 00:12:32,260 And it's the source attribute now like stuff like this get attribute I don't want to get too deep into 166 00:12:32,290 --> 00:12:38,680 now because we will be you we will be talking about this stuff later on these kinds of methods. 167 00:12:38,680 --> 00:12:45,520 Now another thing I want to mention is that each team of collections if you want to turn them into an 168 00:12:45,520 --> 00:12:51,290 array so that you can use things like foreach which you can't by default use with a collection. 169 00:12:51,520 --> 00:12:52,840 You can go ahead and do that. 170 00:12:52,870 --> 00:12:57,850 Actually first of all show you what happens if we try to do a foreach with a collection. 171 00:12:57,850 --> 00:13:01,640 So I'm going to just create a variable called scripts. 172 00:13:02,190 --> 00:13:11,470 Actually will make the select say let scripts equals document DOS scripts and then we'll say scripts 173 00:13:11,470 --> 00:13:18,490 start for each for each takes and the callback function and don't worry about any of this we're going 174 00:13:18,490 --> 00:13:24,280 to get into all of this later on say script and then we'll try to console log 175 00:13:27,190 --> 00:13:34,150 each script and save we get an error saying scripts start for each is not a function because foreach 176 00:13:34,210 --> 00:13:36,730 is for arrays only. 177 00:13:36,730 --> 00:13:40,780 So to basically convert this to an array. 178 00:13:40,990 --> 00:13:43,150 What I could do is take that scripts 179 00:13:45,990 --> 00:13:53,210 and actually create a new variable and we'll call it scripts I can't write scripts. 180 00:13:53,280 --> 00:14:01,060 Array and all we have to do is say array on from and then passing the aged him all collection. 181 00:14:01,350 --> 00:14:06,270 And then we'll just go ahead and change this two scripts array for each. 182 00:14:06,450 --> 00:14:11,310 And now you can see it's looping through and giving us each script tag. 183 00:14:11,340 --> 00:14:13,800 Now we could use the get attribute if we want. 184 00:14:13,800 --> 00:14:19,800 So if I go ahead and grab that and put it onto the console log and save. 185 00:14:19,800 --> 00:14:23,810 Now it's going to give us each source attribute. 186 00:14:23,820 --> 00:14:24,640 OK. 187 00:14:25,170 --> 00:14:29,800 Now if this stuff is overwhelming you and you're not understanding it don't worry about it. 188 00:14:29,820 --> 00:14:32,560 As we move along you're going to get more familiar with it. 189 00:14:32,610 --> 00:14:39,140 I just wanted to kind of give you an idea of what is available globally to this document object. 190 00:14:39,270 --> 00:14:44,940 We're going to be getting into more practical things like using selectors to select stuff from the dorm 191 00:14:45,210 --> 00:14:47,380 rather than doing it this way. 192 00:14:47,580 --> 00:14:53,280 And then we're also go over things like class lists class name and get attribute all these different 193 00:14:53,280 --> 00:14:55,840 methods that are available to us. 194 00:14:55,860 --> 00:15:02,340 We'll talk about more in depth in addition to structures like HTL collections. 195 00:15:02,340 --> 00:15:07,400 All right so in the next video we're going to talk about Dom selectors to get single elements. 196 00:15:07,400 --> 00:15:14,670 So for instance if we wanted to grab this button or grab this link or this list item we can do that 197 00:15:14,670 --> 00:15:16,910 with Dom selectors. 198 00:15:16,920 --> 00:15:17,760 All right so that's it. 199 00:15:17,760 --> 00:15:19,220 I will see you in the next video.