1 00:00:02,330 --> 00:00:08,090 So here's the loaded web page heaters that rendered dorm represented in a h to Al like language. 2 00:00:08,090 --> 00:00:10,200 But in the end this is what the browser passed. 3 00:00:10,430 --> 00:00:14,390 And now let's play around with some of these query methods for that. 4 00:00:14,400 --> 00:00:19,410 I also want to be able to select multiple elements so we'll actually all add onward a list with some 5 00:00:19,410 --> 00:00:27,010 list items where I say item 1 item Q and item free so that we can select by them. 6 00:00:27,090 --> 00:00:33,660 I also will give the item 2 and free a certain class list dash item you can of course use any C as as 7 00:00:33,660 --> 00:00:43,060 class name you want here and I'll also give that h1 tag here an idea of main title maybe so that we 8 00:00:43,060 --> 00:00:50,430 can play around with the different ways of querying elements so with that let's save that and reload 9 00:00:50,430 --> 00:00:53,880 and now play around with these selection methods. 10 00:00:53,880 --> 00:01:00,570 Now for that let's go to the console window here and now all these Karim efforts are available on document. 11 00:01:00,570 --> 00:01:04,930 So on this document object or actually also and that's really important. 12 00:01:05,040 --> 00:01:11,400 On any other element node which you selected I'll show you what I mean in a second. 13 00:01:11,400 --> 00:01:14,880 So let's select this header as title here I mean sorry. 14 00:01:15,000 --> 00:01:16,750 Does age 1 element here. 15 00:01:16,750 --> 00:01:25,500 And let's start with selecting it by I.D. for this you can use document get element by I.D. written 16 00:01:25,500 --> 00:01:26,010 like this. 17 00:01:26,010 --> 00:01:27,850 Make sure you get the casing right. 18 00:01:28,020 --> 00:01:32,980 And then as the argument to this method here you pass the I.D. here. 19 00:01:33,150 --> 00:01:40,650 In this case main title no important just main title like this no hash symbol at the beginning because 20 00:01:40,650 --> 00:01:47,110 this would be your as s query selector but we don't need it here just the I.D. name if you do that. 21 00:01:47,130 --> 00:01:53,310 Now we get this strange output here again but I can hover over it and we see this seems to work to get 22 00:01:53,310 --> 00:02:00,270 a feeling for what's in this object we can all use console dir and then document get element by I.D. 23 00:02:00,660 --> 00:02:03,460 Main Title close all parentheses. 24 00:02:03,510 --> 00:02:06,870 And now we have just javascript object which we can inspect. 25 00:02:06,960 --> 00:02:14,130 Now this is the object which the browser automatically creates and exposes to us in JavaScript for this 26 00:02:14,250 --> 00:02:19,350 H1 element in such objects are created for all rendered HD him all elements. 27 00:02:19,350 --> 00:02:22,050 So for all tax that you could have there. 28 00:02:22,140 --> 00:02:27,600 Now there you find a bunch of information here for example class name would list and you see us as classes 29 00:02:27,600 --> 00:02:32,280 that are added non in this case the position and the size here in the end. 30 00:02:32,280 --> 00:02:35,380 So where is it positioned in the window. 31 00:02:35,400 --> 00:02:36,230 What's its height. 32 00:02:36,240 --> 00:02:39,280 What's it's with the I.D.. 33 00:02:39,560 --> 00:02:46,280 Which was assigned and you can also manipulate most of these properties here as I will show you as soon. 34 00:02:46,340 --> 00:02:48,200 So that's all something we can do. 35 00:02:48,200 --> 00:02:49,540 The inner H L.. 36 00:02:49,550 --> 00:02:52,820 So any nested H2 Mal code which in this case we have non. 37 00:02:52,850 --> 00:03:00,640 So here it's just a text which is in there and all the quite interesting if I close this if we stored 38 00:03:00,640 --> 00:03:05,130 it in a variable which I could name age one the name really doesn't matter. 39 00:03:05,140 --> 00:03:09,630 Of course it doesn't have to reflect the element name you're about to select. 40 00:03:09,640 --> 00:03:14,830 So if I store this and each one is stored in selected main title in there it's also interesting that 41 00:03:14,890 --> 00:03:19,420 on this age one element you can again use certain methods. 42 00:03:19,420 --> 00:03:24,740 For example query selector or query SELECT or all get element by ideas. 43 00:03:26,190 --> 00:03:32,400 Is actually not supported here but all other selection methods are basically supported as well. 44 00:03:32,790 --> 00:03:40,110 So the idea simply is that with document and then some selection method you search in the entire document 45 00:03:40,290 --> 00:03:45,170 for an element by a class name or with a certain C as a selector. 46 00:03:45,270 --> 00:03:50,400 But then once you have one element and you want to search only the child elements in the child nodes 47 00:03:50,460 --> 00:03:56,370 of that note I should say then you can use that element itself like this age one element and then use 48 00:03:56,370 --> 00:03:59,250 the selection methods in there to only search the child. 49 00:03:59,240 --> 00:04:04,850 No it's in that part of the DOM tree so only in the H1 element for example where we won't find any. 50 00:04:04,950 --> 00:04:06,390 But that's something we know here. 51 00:04:06,420 --> 00:04:11,220 Of course if we would search other parts like you on the list here then we could search its children 52 00:04:11,400 --> 00:04:16,050 for having a list item with this list item class for example. 53 00:04:16,050 --> 00:04:16,870 So let's have a look. 54 00:04:16,890 --> 00:04:26,060 Add more selection methods here for example again on the document we can use this Get elements by class 55 00:04:26,060 --> 00:04:28,090 name method here. 56 00:04:28,100 --> 00:04:33,980 Now this is a pretty old method but still support it and still find to use and there we can for example 57 00:04:33,980 --> 00:04:36,860 search the list item classes here. 58 00:04:36,860 --> 00:04:40,170 So here indeed you just entered to see is this classed him like this. 59 00:04:40,280 --> 00:04:46,190 And this will return a so-called h t Mal collection object which in the end is like an array not a true 60 00:04:46,190 --> 00:04:51,650 array not everything you can do in an array works there but you can't for example use a for loop with 61 00:04:52,380 --> 00:05:00,600 this for let IIS syntax and so on to search through that array and select elements by index. 62 00:05:00,740 --> 00:05:08,120 And this gives you access to all the items all the nodes that have such a class name now more common 63 00:05:08,120 --> 00:05:11,980 these days is a different selector though and that would be query selector. 64 00:05:11,990 --> 00:05:18,440 So if you want to select an element by a class name or by tag you typically don't use these older methods 65 00:05:18,800 --> 00:05:25,010 get the elements by but instead Clarice Lecter get element by ideas one exception dare you typically 66 00:05:25,010 --> 00:05:31,220 use get element by idea if you want to get an element by its I.D. because that is a unique element on 67 00:05:31,220 --> 00:05:36,500 the page but if you want a collection or even if you want one element but with a more complex query 68 00:05:36,500 --> 00:05:43,060 potentially query selector is the way to go in there for example to select all items with the list item 69 00:05:43,060 --> 00:05:49,810 class you would all the type list item but now important here you need a selector as you would use it 70 00:05:50,200 --> 00:05:57,740 in a C as s code so they are to select a class you add a dot in front and idea would be selected with 71 00:05:57,740 --> 00:05:58,670 the hashtag. 72 00:05:58,780 --> 00:06:06,100 This would look for elements with a tag off list item ends on so you can search for dot list item and 73 00:06:06,100 --> 00:06:11,380 now query selector as I mentioned on the slide will return to first matching item if you want to have 74 00:06:11,500 --> 00:06:21,800 all matching items you use document queries selector all and then enter your C as s selector in there 75 00:06:22,010 --> 00:06:27,950 and this will now give you node list also such an array like object which you can basically work with 76 00:06:27,950 --> 00:06:34,610 like an array that gives you all the items have found for this selector and does selector here can be 77 00:06:34,610 --> 00:06:41,660 complex you can absolutely also use query selector here to for example look in the unordered list and 78 00:06:41,660 --> 00:06:49,940 then for a list item and then first off type this would be a valid CSA s selector to select the first 79 00:06:49,940 --> 00:06:51,820 list item in unordered list. 80 00:06:52,580 --> 00:06:58,370 So a regular C as a selector nothing fancy or even using a pseudo selector as you can tell if you do 81 00:06:58,370 --> 00:07:05,150 that you get the first list item on the other hand if I would use lost off type here we would select 82 00:07:05,150 --> 00:07:08,120 the last list item as you can see when I hover over it. 83 00:07:08,270 --> 00:07:13,760 So that's really convenient query selector gives you a lot of power for targeting individual elements 84 00:07:13,880 --> 00:07:21,470 on your screen and you would want to do that of course to add event listeners or maybe even to manipulate 85 00:07:21,470 --> 00:07:27,200 these elements on the go because that's the cool thing about JavaScript it runs in the browser offered 86 00:07:27,200 --> 00:07:33,280 a web page has been loaded so it allows you to manipulate what's happening on the screen with that already 87 00:07:33,290 --> 00:07:40,020 loaded page which allows you to create highly dynamic user experiences where you can change things on 88 00:07:40,020 --> 00:07:46,040 the UI without the need to reload document or to load a new document instead you can change the existing 89 00:07:46,040 --> 00:07:52,400 one which provides a faster and better user experience than if the document reloads on every click so 90 00:07:52,430 --> 00:07:58,490 that's a really powerful thing about JavaScript and with query selector get element by a D and these 91 00:07:58,490 --> 00:08:04,790 other methods we have different ways of selecting elements and of course will select elements very often 92 00:08:04,790 --> 00:08:10,550 fraught is fraught this course here for this module but I hope you now have a solid understanding a 93 00:08:10,550 --> 00:08:18,090 solid overview of the core ways of selecting elements and what the core philosophy there is also always 94 00:08:18,110 --> 00:08:23,030 keep in mind that you can not just use document to select elements that will just search the entire 95 00:08:23,030 --> 00:08:29,980 document so the entire head and body but that if you already have an element like your unordered list. 96 00:08:30,140 --> 00:08:40,970 So if I were a selector by you l and I stored as in a constant you l that you Dan always can use this 97 00:08:41,420 --> 00:08:48,980 element which you already selected this element node and there you can all the search for queries selector 98 00:08:49,070 --> 00:08:54,290 and now list items and this will not only search for the first matching list item instead of the unordered 99 00:08:54,290 --> 00:08:56,900 list and nowhere else on the document. 100 00:08:56,900 --> 00:09:02,120 So this is all something you can use and this is how you query elements in the document how you get 101 00:09:02,210 --> 00:09:07,790 access to them in JavaScript as you see you can store them in constants and variables and this allows 102 00:09:07,790 --> 00:09:13,430 you to work with them now really important for it isn't higher Dom querying and manipulation stuff is 103 00:09:13,430 --> 00:09:18,260 that you import your script correctly I already explained all about this early on the course I just 104 00:09:18,260 --> 00:09:24,320 want to emphasize it here you need to import your script such that it only runs after all HDMI the content 105 00:09:24,320 --> 00:09:29,750 has been passed that can even be achieved by putting it to the end here like that then it works even 106 00:09:29,750 --> 00:09:36,560 without the fir or as I have it here by importing it into head but adding the fir year which means download 107 00:09:36,560 --> 00:09:41,960 it early but only run it once you're done with passing because otherwise if you don't have to fir here 108 00:09:42,200 --> 00:09:47,630 the script might execute too early and therefore might try to query for elements which haven't been 109 00:09:47,630 --> 00:09:52,070 passed and loaded yet which of course will not work that's really important to keep in mind here.