WEBVTT 00:00.110 --> 00:04.610 So in the previous sections, you now learned how to use chrome developer tools. 00:05.540 --> 00:13.250 And you learned how to select an element, an element and how to also scrape it from inside NodeJS. 00:13.700 --> 00:19.820 Now we're going to move on to the next lesson lesson inside this site here, and we're going to learn 00:19.820 --> 00:22.250 how to select multiple elements. 00:23.090 --> 00:27.110 So if I go here and inspect these elements we have here. 00:27.790 --> 00:31.420 We can see that they are all h two elements. 00:32.590 --> 00:39.010 So how do we select these elements and how do we get our or how do we get a list of these elements? 00:39.370 --> 00:44.470 So go inside the console and make sure that you have jQuery injected. 00:44.470 --> 00:51.700 So click on this one to inject the jQuery and then let's try and just select the H2 elements. 00:53.080 --> 00:54.280 And there we go. 00:54.280 --> 00:55.780 Now we have this list. 00:55.810 --> 00:57.160 We get get back. 00:57.160 --> 01:05.200 And each of these is a a the HTML element of this these elements we have here. 01:05.830 --> 01:09.890 So if I also go and say dot text, here we go. 01:09.940 --> 01:13.840 Just going to get the text of all the elements in one string. 01:15.250 --> 01:21.610 We can also go and try and print for each of these elements a new line. 01:21.760 --> 01:25.810 So we can say h two dot each. 01:25.990 --> 01:31.830 And then the first parameter is an index and the second one is the element. 01:33.130 --> 01:37.690 And then we can well, I won't go and make an arrow function. 01:37.690 --> 01:44.080 So we have the index and the element here and then make an arrow function. 01:45.470 --> 01:52.790 And then put in a curly brace and then you can press shift and enter to make a new line. 01:53.040 --> 01:55.340 Makes things a little easier to see. 01:55.550 --> 01:58.040 And we can say console log. 01:58.790 --> 02:00.110 And we can say. 02:01.570 --> 02:04.480 The the dollar sign element. 02:06.120 --> 02:07.890 Dot text. 02:08.950 --> 02:16.840 And that's going to print out the text of each element on a new line and then end with a curly brace 02:17.080 --> 02:19.750 and a round parenthesis. 02:20.640 --> 02:26.160 So now it is printing each of these elements text inside the console. 02:26.960 --> 02:33.650 So that means that then you can save each of these elements into a new object inside a MongoDB database 02:33.650 --> 02:37.040 or a new line inside a CSV file, for example. 02:38.630 --> 02:44.450 And again, just like before, we can do the same thing inside of NodeJS. 02:45.610 --> 02:53.890 So if I go ahead and copy this URL with the lesson two dot HTML instead paste it in here. 02:55.320 --> 02:59.340 And then we can simply delete this line where we create a text. 02:59.400 --> 03:00.510 Let's delete that. 03:00.510 --> 03:08.340 So we just have the jQuery or the dollar sign we create here from Cheerio where we load the HTML in. 03:09.120 --> 03:17.190 Let's just select all the H2 elements again and we can do a dot each just like we did inside of the 03:17.190 --> 03:18.390 chrome console. 03:18.950 --> 03:26.120 So we can do another parenthesis here, say index element to a error function. 03:26.810 --> 03:32.210 Then have the curly braces and then we can do exactly the same thing again. 03:32.210 --> 03:33.890 We can say console.log. 03:35.120 --> 03:38.660 Dollar sign element dot text. 03:39.740 --> 03:46.100 And now if we run this inside of Node JS, we should see the same output in the console. 03:47.440 --> 03:48.250 And there we go. 03:48.250 --> 03:50.170 We see the same output again. 03:50.440 --> 03:59.590 And of course, since I am super lazy, I usually just select the code I was fiddling with inside of 03:59.590 --> 04:04.990 Chrome developer tools and I just copy that and paste it inside here. 04:05.380 --> 04:08.680 So you can just copy that and paste it inside here. 04:10.660 --> 04:11.710 And that's it. 04:12.360 --> 04:20.070 That's how you transfer the code that you arrived to inside of Chrome developer tools into NodeJS. 04:21.400 --> 04:25.840 And you also saw how to how you select multiple elements. 04:25.930 --> 04:33.700 Actually, as long as you the elements have the same tag or attribute that you're trying to target, 04:33.700 --> 04:41.590 in this case, it's H2 it jQuery is automatically going to make a list of these elements for us. 04:43.190 --> 04:49.490 So that's how we select multiple elements and that is how we loop through each of these elements and 04:49.910 --> 04:51.470 output their text.