1 00:00:02,260 --> 00:00:06,860 Now let's dive into some other ways of selecting elements which we haven't used too much thus far 2 00:00:06,950 --> 00:00:12,950 or not at all to be precise and that are the methods for selecting multiple elements. 3 00:00:13,040 --> 00:00:17,290 So let's say I want to select all list items, all li's, 4 00:00:17,430 --> 00:00:23,760 well then we can do this with document query selector all and then the li tag for example. 5 00:00:23,760 --> 00:00:29,800 This will now select all elements on our entire document with an li tag, 6 00:00:29,820 --> 00:00:35,790 so all li's therefore is such a node list now with three list elements as you can tell. If you want 7 00:00:35,790 --> 00:00:41,750 to work with one of them now, you have to use all li's and then access them by index, 8 00:00:41,760 --> 00:00:44,670 so index 0 for the first element for example, 9 00:00:44,700 --> 00:00:46,570 second element, third element, 10 00:00:46,590 --> 00:00:50,070 this would work or of course, you can also use a loop here. 11 00:00:50,130 --> 00:00:57,210 So here in app.js, if I want to get my list item elements let's say and store them in a constant 12 00:00:57,210 --> 00:00:58,500 named like this, 13 00:00:58,500 --> 00:01:05,530 then we can use query selector all and search for li, what I just did in a console 14 00:01:05,550 --> 00:01:09,540 and now if you would want to do something with them, you can go through them with a for/of loop, 15 00:01:10,110 --> 00:01:16,890 for list item of list item elements and therefore maybe here, list item el to make it clear that we're 16 00:01:16,890 --> 00:01:21,470 working with elements here and then here for example, console dir 17 00:01:21,510 --> 00:01:23,590 list item el, like this. 18 00:01:23,790 --> 00:01:28,140 If you do that and you then reload, the script will run and now you'll see that's getting output like 19 00:01:28,140 --> 00:01:28,520 that. 20 00:01:29,070 --> 00:01:34,890 An alternative to this and this is the most modern way of doing that but an alternative would be to 21 00:01:34,890 --> 00:01:41,870 use list item elements and select them by using get elements by tag name 22 00:01:41,910 --> 00:01:46,030 and here, you can also select them like this, 23 00:01:47,160 --> 00:01:52,190 you can access them with a for/of loop, if you now reload we get the same result. 24 00:01:52,230 --> 00:01:54,750 Minor difference which I also already mentioned earlier, 25 00:01:54,780 --> 00:01:59,400 this gives you a live list which reflects changes to the selected elements, 26 00:01:59,400 --> 00:02:03,510 this does not. So I don't mean changes to the elements themselves, 27 00:02:03,510 --> 00:02:08,390 so if I change the text content of one of the list items due to that reference type thing which you 28 00:02:08,390 --> 00:02:11,880 learned about that will be reflected in the objects we selected here 29 00:02:11,970 --> 00:02:19,020 but the list itself, the number of items in the array, that will change here for this selected list 30 00:02:19,020 --> 00:02:24,360 if you add or remove elements, something we haven't learned about yet, it will not for query selector 31 00:02:24,360 --> 00:02:26,600 all because that just takes a snapshot. 32 00:02:26,610 --> 00:02:32,800 The DOM objects themselves, due to being reference values will reflect changes to them, 33 00:02:32,850 --> 00:02:34,800 that is important to know. 34 00:02:34,800 --> 00:02:37,590 So let's now summarize a bit of what we learned thus far, 35 00:02:37,620 --> 00:02:43,260 what we played around with in the console, for example we can select the h1 element with document 36 00:02:43,290 --> 00:02:52,290 get element by ID, since this conveniently has an ID of main title to get access to it like this and 37 00:02:52,290 --> 00:02:57,840 then we can also use this to for example change its text content to some new title, 38 00:02:57,840 --> 00:02:58,850 this would work. 39 00:02:58,890 --> 00:03:03,510 We can also change its styles by accessing the style property and there, color 40 00:03:06,110 --> 00:03:10,570 white and then maybe also the background color, 41 00:03:14,160 --> 00:03:20,340 like this black and here important, background color has to be written like this, with a dash it would 42 00:03:20,340 --> 00:03:21,440 simply be invalid 43 00:03:21,450 --> 00:03:27,820 Javascript, my IDE you already complains here and therefore we have these mappings of the original CSS 44 00:03:27,850 --> 00:03:33,270 property names, which are pretty much the same but dashes are removed and instead characters after 45 00:03:33,270 --> 00:03:35,070 dashes are capitalized. 46 00:03:35,340 --> 00:03:41,200 So that would be one way of selecting elements, if you would want to select a list item, 47 00:03:41,220 --> 00:03:45,960 let's say the last one, we could use query selector for that conveniently and you'll actually use that 48 00:03:45,960 --> 00:03:52,440 a lot because it is really nice to use. So last of type here with a pseudo selector, that would give us access 49 00:03:52,440 --> 00:03:54,060 to the last list item 50 00:03:54,060 --> 00:04:00,570 so that on that list item, we could also change the text on to the content to maybe be the existing text 51 00:04:00,570 --> 00:04:05,060 content even and add something new, change like this, 52 00:04:05,060 --> 00:04:09,810 this here has to be li and if I now save this 53 00:04:09,890 --> 00:04:11,010 and here we reload, 54 00:04:11,060 --> 00:04:18,950 now we see that change title and we see also that changed list item and also nice to know and something 55 00:04:18,950 --> 00:04:21,080 that's easy to forget, 56 00:04:21,140 --> 00:04:26,270 you can also get access to certain elements like the document body with document.body and store 57 00:04:26,270 --> 00:04:33,500 this here and then we can actually also run our query methods except for get element by ID on these 58 00:04:33,500 --> 00:04:34,480 selected elements, 59 00:04:34,490 --> 00:04:36,140 of course not just true for body, 60 00:04:36,140 --> 00:04:40,310 that's just something I wanted to show you because we have a property for getting access to the body 61 00:04:40,340 --> 00:04:41,740 directly on document, 62 00:04:41,780 --> 00:04:46,640 the same is true for head but actually no matter how you selected it, if there is a special property 63 00:04:46,640 --> 00:04:52,130 available on document or not or if you selected it simply with get element by ID or query selector, 64 00:04:52,460 --> 00:04:54,270 on any element you selected, 65 00:04:54,290 --> 00:05:00,440 so on this body but always on this h1 element and so on, you have the query selector and the get elements 66 00:05:00,440 --> 00:05:06,740 by something methods available to dive deeper into that part of the DOM, into that part of the DOM tree 67 00:05:06,740 --> 00:05:10,670 if you will and select child elements. So that's also something you can do.