WEBVTT 00:00.750 --> 00:07.850 You already know how to select and manipulate on individual elements using dumb methods which are getting 00:07.860 --> 00:10.080 hammered by ID and query selector. 00:10.620 --> 00:15.330 Now it's time to move on and to learn about how to deal with multiple elements. 00:15.330 --> 00:22.350 At the same time, there are two methods and some catch elements by class name and get elements by Tognum, 00:22.740 --> 00:28.050 which allow us to select and manipulate on multiple elements using class names and techniques. 00:29.190 --> 00:36.840 Let's start from Get Elements by Class Name Method, which returns a collection of all elements in the 00:36.840 --> 00:38.750 document with specified class name. 00:39.480 --> 00:46.560 In other words, it returns an array like object of all child elements which have already given class 00:46.560 --> 00:46.900 names. 00:48.000 --> 00:54.270 Remember that this method returns an array like collection, which is not actually an array. 00:56.220 --> 00:59.700 All right, let's see practically what this method does. 01:00.540 --> 01:05.550 Choose from HTML document the elements that have the same class names. 01:07.150 --> 01:14.220 These kind of elements are placed inside, at least I mean the elements for icons. 01:16.140 --> 01:19.340 All these elements have the same class name F.A.A.. 01:19.800 --> 01:28.470 So let's use this class name and select all those elements, create variable icons, because we are 01:28.470 --> 01:39.540 going to get multiple elements that write document that get elements by class name and write the class 01:39.540 --> 01:41.320 name inside the parentheses F a. 01:44.220 --> 01:51.660 So here we have selected elements with class name F.A.A. and you may notice that they are placed inside 01:51.660 --> 01:55.610 square brackets, similar as it's in case of a right. 01:56.340 --> 02:01.830 But if you drop down, you will see that it's an HTML collection. 02:02.910 --> 02:05.580 This collection is very similar to an array. 02:05.970 --> 02:13.740 It has length property and also each of the items in collection has its proper index number and they 02:13.740 --> 02:15.360 are zero based as well. 02:16.020 --> 02:23.070 Therefore, if we want to access on a particular item, we can use array syntax and put the relevant 02:23.070 --> 02:25.110 index number inside the square brackets. 02:26.040 --> 02:28.680 So right icons zero. 02:30.540 --> 02:38.520 You see that we have first item from HTML collection in the same way you can access on any of the items 02:38.970 --> 02:39.630 from it. 02:40.260 --> 02:42.330 Let's say the second one. 02:44.190 --> 02:51.780 Because of that, the items in the collection are zero based and also it has the length property then 02:51.780 --> 02:55.230 you're able to use for loops with these type of collections. 02:56.520 --> 02:59.370 Now I'm going to write some codes in text editor. 02:59.910 --> 03:07.640 So let's go back to brackets, then opens cryptologist file, which is empty for now. 03:09.330 --> 03:17.610 At first create again variable icons and select elements with class name as a right for items equals 03:17.940 --> 03:20.490 document that get elements by class name. 03:24.570 --> 03:35.760 And then right, the class of eight, then below creates for loop, right for that set, the counter 03:35.760 --> 03:45.150 variable, i.e. equal to zero then is less than the length of the Aitken's. 03:45.480 --> 03:45.690 So. 03:45.690 --> 03:45.900 Right. 03:45.900 --> 03:51.120 I can start length and then the increment I plus plus. 03:54.740 --> 03:56.210 Inside the color braces. 03:57.640 --> 04:06.340 Let's log the variable in Castle, White Castle that log icons and then square brackets, right, I. 04:10.170 --> 04:16.450 Reload the page and you see that we have here all items from e-mail collection. 04:18.330 --> 04:25.380 OK, as you see, we have used for Loop with a collection in the exact same way as it's in case of a 04:25.380 --> 04:25.790 race. 04:26.370 --> 04:33.670 But as we said, collection is not an array and therefore we cannot use a builtin methods with Estima 04:33.690 --> 04:34.280 collections. 04:35.340 --> 04:43.510 Let's prove it and use one of the array methods push, which adds an item to array to the end. 04:44.070 --> 04:44.580 So right. 04:44.580 --> 04:49.290 I can start to push and then writes Hello. 04:53.590 --> 05:00.410 Reload and we have an error, which tells us that a constant push is not a function. 05:01.870 --> 05:07.030 Those words are not very helpful because they don't tell us exactly the problem. 05:07.540 --> 05:09.480 But we know what is the reason. 05:10.360 --> 05:14.080 The reason is that you cannot use Arae methods with e-mail collections. 05:15.070 --> 05:17.290 And there is a nice way to fix that. 05:17.440 --> 05:19.880 And I'm going to show you it in a second. 05:20.170 --> 05:24.840 We need somehow to transform e-mail collection into an array. 05:25.480 --> 05:32.890 And for that we have a great method in JavaScript, which is called a red dot from this method creates 05:32.890 --> 05:39.150 a new era, for instance, from an array like object, which in our case is a similar collection. 05:40.510 --> 05:44.710 Let's use this method and get rid of this line of code. 05:46.120 --> 05:55.840 Create variable var icons array equals to array dot from. 05:58.130 --> 05:59.690 And inside the parentheses. 06:01.580 --> 06:03.920 Right, Aitken's. 06:07.600 --> 06:14.560 Let's log both variables in Castle, right, Castle, Dot log, aikens array. 06:19.570 --> 06:22.270 And then cancel that look icon's. 06:25.150 --> 06:34.390 Reload then dropped out, both of them, and you see that in the first case, we have an array and in 06:34.390 --> 06:36.860 the second case we still have a collection. 06:38.410 --> 06:40.330 So let me explain what happens here. 06:41.080 --> 06:49.690 When we assign a dot from icons to variable, icons are right, then JavaScript engine creates memory 06:49.690 --> 06:55.690 space for I can separate this variable gets a value of icons variable. 06:56.380 --> 07:03.550 But because of using a right that from method icons, a right variable becomes an array in the execution 07:03.550 --> 07:04.020 stage. 07:05.140 --> 07:12.570 But a variable icon itself maintains its value as a symbol collection and the results. 07:12.590 --> 07:17.330 What we have in council proves that makes sense. 07:18.730 --> 07:26.590 I know that it's a bit confusing, but if you look carefully on the results, everything will be obvious. 07:28.650 --> 07:36.540 OK, after that, you are able to use a real push method, but with Aikens array variable, so. 07:36.750 --> 07:40.710 Right, I can see a red dot push. 07:44.820 --> 07:45.930 That hello. 07:49.460 --> 07:54.490 And plug it in, console, right, console the plug icons are right. 07:58.530 --> 08:04.340 Reload and you can see that we have here new item, hello, inside an array. 08:07.570 --> 08:14.680 All right, I'm going to stop here for a while and I would like to recommend you to think about what 08:14.680 --> 08:21.070 I've shown in this video would be great if you tried to test this codes and practice on your own. 08:21.910 --> 08:28.180 Think of new examples and test them, for example, using Dham properties that you are already familiar 08:28.180 --> 08:28.430 with. 08:28.690 --> 08:31.700 I mean, text content and interact HTML. 08:33.160 --> 08:39.070 See you in the next video where we will continue talking about how to access on multiple elements using 08:39.070 --> 08:40.360 other methods.