WEBVTT 00:00.640 --> 00:06.130 We have already learned some of the methods and in this video, I'm going to show you one of the most 00:06.130 --> 00:09.600 popular and frequently used method, which is Querrey Selecter. 00:09.620 --> 00:16.120 All you remember that we have used in previous videos where Solectron method, which would tell us the 00:16.120 --> 00:20.140 first element that matches, specified a selector in the document. 00:20.500 --> 00:27.430 And the equerry selected all method acts almost in the same way, but it returns all elements in the 00:27.430 --> 00:30.100 document that matches a specified just selector. 00:31.900 --> 00:43.720 All right, let's go back to our text editor, create variable var ice equals and use here Quarrie Selecter, 00:43.720 --> 00:44.530 all method, right. 00:44.560 --> 00:46.810 Document dot query selecta all. 00:50.830 --> 00:55.420 And inside the parentheses, let's select a list element. 00:57.610 --> 01:01.390 Then getting counsel right, counsel, that log, Ellyse. 01:06.180 --> 01:13.010 Reload and you see that we have the same result as it was in case of get aliments by Takanabe method, 01:13.590 --> 01:19.980 but if we drop down it, then you will see that instead of Estima collection, we have something different. 01:20.400 --> 01:23.400 And it is a no no. 01:23.400 --> 01:27.090 This is an object and it's almost the same as an HDMI collection. 01:27.660 --> 01:35.070 Both of them have length property and the endless numbers of items is zero based, but none of them 01:35.070 --> 01:35.340 is in. 01:35.460 --> 01:35.760 Right. 01:37.240 --> 01:43.150 One of the main differences between no less than ideal collection is that no list allows us to use a 01:43.150 --> 01:47.590 right for each method without transforming it into array. 01:48.670 --> 01:49.870 So let's write. 01:50.260 --> 01:52.510 Elyse thought for each. 01:55.400 --> 01:56.570 Then the function. 01:59.390 --> 02:02.930 And inside the parentheses, right, the parameter elai. 02:06.580 --> 02:08.740 Then locating Castle, right, Castle? 02:08.740 --> 02:10.150 Good luck, Ally. 02:14.270 --> 02:21.890 Reload and you see that it works, but it doesn't mean that you can use other methods with Notwist, 02:22.880 --> 02:28.940 we can prove that and let's use push method and Right Aleister to push. 02:31.310 --> 02:34.040 And inside the parentheses, right, hello. 02:37.830 --> 02:46.060 Then refresh and we have, again, an error saying that Ellyse, that push is not a function. 02:46.890 --> 02:54.210 The reason, again, is the same node list like Estima collection is not an array in order to use own 02:54.210 --> 03:00.090 methods, except for each with node lists, you need to transform it into an array. 03:01.320 --> 03:04.300 Regardless of that you can use for each with no list. 03:04.320 --> 03:11.370 I recommend you to always at first transform it into array and use for each and any other methods. 03:11.790 --> 03:12.300 All right. 03:13.860 --> 03:20.070 One of the advantages that, quote, selecter all has is that you can select multiple elements with 03:20.070 --> 03:21.570 multiple selectors. 03:22.650 --> 03:25.680 For example, we can right here, H2 had an element. 03:27.500 --> 03:30.560 That we need to separate the selectors by Colma. 03:31.880 --> 03:35.330 Now let's choose one more element from HTML document. 03:36.420 --> 03:40.700 Let's say development with Edelheit least. 03:41.990 --> 03:46.700 So write this value of the attribute with Pouncy. 03:49.650 --> 03:55.650 Also, that comment is called out for a while and see what we have to refresh. 03:56.880 --> 04:03.810 And I see that all the elements, what we have chosen are put inside our note list, you may notice 04:03.810 --> 04:08.430 that inside parentheses we have written at first list and then to select us. 04:09.240 --> 04:14.220 But if you look at the results, H2 is placed first in no list. 04:15.030 --> 04:17.180 There isn't a simple dictionary. 04:17.190 --> 04:20.250 Select selector or method puts the element in node list. 04:20.250 --> 04:23.610 According to where these elements are placed in the document. 04:24.540 --> 04:27.520 It selects elements line by line, from top to bottom. 04:28.290 --> 04:35.460 So at first it has found H2 heading that lists and then deep element to it. 04:35.460 --> 04:36.840 Edelheit list. 04:38.010 --> 04:38.480 All right. 04:40.260 --> 04:47.310 The last thing that I'm going to show you is that we can change and manipulate on text or estimate contents 04:47.310 --> 04:51.480 of these elements using tax content and in our estimate properties. 04:52.710 --> 05:00.780 Let's remove the comment from here that transform the list into array because as we said, it's a better 05:00.780 --> 05:01.340 practice. 05:02.040 --> 05:04.170 So write a report from. 05:07.760 --> 05:08.540 Elyse. 05:13.640 --> 05:19.820 And now use one of the dump properties, let's say tax content, and change the content of the items 05:19.820 --> 05:20.730 inside novelist. 05:21.920 --> 05:23.330 So right here. 05:26.320 --> 05:28.210 Well, I don't text content. 05:30.410 --> 05:33.400 Equals Hello, world. 05:38.680 --> 05:45.520 Reload and you see that we have changed the tax content of the items into Hello World. 05:48.040 --> 05:56.050 OK, this was all about Querrey Selecta old method, which is one of the frequently used and popular 05:56.050 --> 05:56.880 method of Tom. 05:58.090 --> 05:58.770 Let's move on.