1 00:00:06,110 --> 00:00:06,360 Here, 2 00:00:09,420 --> 00:00:15,700 everyone, welcome to another video now we're going to talk about more aget element methods. 3 00:00:16,050 --> 00:00:22,860 So up to this point, we only use the jet element by I.D. to select element. 4 00:00:23,250 --> 00:00:26,460 So now let's explore a few other methods. 5 00:00:26,820 --> 00:00:31,330 So there's one Kalighat element by class name. 6 00:00:31,620 --> 00:00:40,470 So here in this page, if I use the inspector, we can see that I've just created three diffs. 7 00:00:40,680 --> 00:00:43,250 We have a class of example. 8 00:00:43,380 --> 00:00:46,020 So let's go to visuals, to the code. 9 00:00:46,020 --> 00:00:49,470 And now I'm just going to create a variable called. 10 00:00:51,260 --> 00:00:52,130 Aliments. 11 00:00:55,090 --> 00:01:04,090 And now I'm just going to use document and instead of using get element by I.D., you can see that when 12 00:01:04,090 --> 00:01:07,510 we use the DOT we have all these options. 13 00:01:07,840 --> 00:01:11,650 So let's just try get elements by class name. 14 00:01:14,420 --> 00:01:20,900 And inside parentheses, we can try the class of example. 15 00:01:27,030 --> 00:01:36,690 Now, let's do cancel the log and let's see what JavaScript is going to return after we execute this. 16 00:01:36,990 --> 00:01:37,890 So let's. 17 00:01:39,090 --> 00:01:42,180 Do you cancel that log aliments? 18 00:01:47,360 --> 00:01:49,220 So refreshing the page. 19 00:01:49,250 --> 00:01:54,850 Let's go to the council and as you can see, we are getting an array. 20 00:01:55,160 --> 00:01:58,270 So we have three elements in return. 21 00:01:58,520 --> 00:02:06,020 We have a length of three so we can access each of these elements with their indexes. 22 00:02:07,290 --> 00:02:16,650 So now we can do something like Element, which is our variable, and then we can just select an index, 23 00:02:16,860 --> 00:02:19,960 we know that this variable has three elements. 24 00:02:20,190 --> 00:02:28,560 So if we try elements with an index of zero, we can see that JavaScript is selecting this element for 25 00:02:28,560 --> 00:02:28,950 us. 26 00:02:29,340 --> 00:02:34,740 If we try one, we can see the second being highlighted, too. 27 00:02:34,740 --> 00:02:37,310 We can see the third being highlighted. 28 00:02:37,590 --> 00:02:40,860 So let's just select the first element. 29 00:02:41,280 --> 00:02:49,830 So by doing this, it's just the same thing that we were doing before selecting elements and now we 30 00:02:49,830 --> 00:02:51,240 can just do inner. 31 00:02:52,710 --> 00:02:53,850 Age TML. 32 00:02:55,430 --> 00:03:02,840 And now let's just redefine the inner age, the amount of this element, so I'm just going to ride changing. 33 00:03:05,510 --> 00:03:06,650 The texts. 34 00:03:07,800 --> 00:03:09,820 Of the first. 35 00:03:11,340 --> 00:03:12,150 Element. 36 00:03:13,970 --> 00:03:21,680 If I do this and press enter, we can see that we were able to change the text of the first element. 37 00:03:22,010 --> 00:03:30,430 So we've just use the get elements by class name methods and we got an array in return. 38 00:03:30,620 --> 00:03:38,540 So now we know how to work with a race with just use the index notation to do something with it. 39 00:03:38,900 --> 00:03:45,950 So this is why I told you it was really important to understand the data types and know how to work 40 00:03:45,950 --> 00:03:48,000 with them so we could proceed. 41 00:03:48,140 --> 00:03:55,310 Now we have a few more examples so we can do the same thing with get elements by tag name. 42 00:03:55,560 --> 00:03:58,970 So in this case, I have three paragraphs. 43 00:03:59,300 --> 00:04:03,170 So let's go back to Visual Studio Code and. 44 00:04:05,380 --> 00:04:07,600 Let me just comment this. 45 00:04:11,050 --> 00:04:19,960 And now, instead of getting elements by class name, I'm just going to get elements using the tag name. 46 00:04:23,160 --> 00:04:30,840 So get elements by tag name, just be careful, because when we were working with the get element buy 47 00:04:30,840 --> 00:04:34,260 I.D., this wasn't in plural. 48 00:04:34,590 --> 00:04:46,100 So we had that element by I.D. And now we have got elements like last name gas elements by tag name. 49 00:04:46,410 --> 00:04:50,190 Just pay attention to this so you don't get an error. 50 00:04:50,490 --> 00:04:53,160 So get elements by tag name. 51 00:04:53,430 --> 00:04:58,410 And now let's just get all the P elements of our page. 52 00:04:58,830 --> 00:05:01,800 And now let's just do cancel that log. 53 00:05:02,010 --> 00:05:03,360 Let me save this. 54 00:05:04,640 --> 00:05:07,620 And let me see what happens. 55 00:05:07,880 --> 00:05:16,850 So now I have nine elements, because actually every element that I'm using to write content. 56 00:05:16,860 --> 00:05:18,210 So this one is a. 57 00:05:19,060 --> 00:05:20,390 This is another P. 58 00:05:23,160 --> 00:05:24,310 Another P. 59 00:05:24,360 --> 00:05:34,470 So, as you can see, we have nine paragraphs on our page and we were able to select all of them using 60 00:05:34,470 --> 00:05:38,500 the get elements by tag name method. 61 00:05:38,730 --> 00:05:46,620 So now we know that if we want to change this first paragraph, we can just use index zero. 62 00:05:46,860 --> 00:05:51,950 But what do we do if we want to change all the elements of our page? 63 00:05:52,170 --> 00:05:54,780 So we want to change all the paragraphs. 64 00:05:55,020 --> 00:06:02,120 Maybe we want to change the success or we want to do something else with these elements. 65 00:06:02,130 --> 00:06:03,700 How can we do this? 66 00:06:04,040 --> 00:06:08,100 Well, this is where loops are going to come handy. 67 00:06:08,370 --> 00:06:11,750 So this is the subject of our next lesson. 68 00:06:11,760 --> 00:06:12,630 I'll see you then.