1 00:00:00,780 --> 00:00:03,900 What's going on guys so in this video going to do a couple different things. 2 00:00:03,900 --> 00:00:10,140 I'm going to show you how to replace elements in the dorm how to remove elements how to work with classes 3 00:00:10,200 --> 00:00:13,730 how to manipulate classes and attributes. 4 00:00:13,890 --> 00:00:20,310 Meaning that I want to show you how to get attributes and classes how to change them how to add them 5 00:00:20,310 --> 00:00:22,200 remove them and so on. 6 00:00:22,200 --> 00:00:27,950 All right so let's start with replacing elements on say replace element. 7 00:00:27,960 --> 00:00:34,470 And what I want to do is I want to replace this h 5 right here with an H to I'm OK with with some different 8 00:00:34,470 --> 00:00:35,490 text. 9 00:00:35,550 --> 00:00:42,060 So first thing we'll do is create an element we've already seen how to do this will create a variable 10 00:00:42,060 --> 00:00:43,580 or call it new heading. 11 00:00:44,250 --> 00:00:54,320 And let's set this to document daunts create element and let's make this an. 12 00:00:55,530 --> 00:01:03,060 OK and we can Konsole dot log it down here if we want just to see what we have so far. 13 00:01:03,920 --> 00:01:06,950 And we just have an H2. 14 00:01:06,990 --> 00:01:16,190 All right let's go ahead and add an ID this H5 has an ID of I believe its task title task title. 15 00:01:16,320 --> 00:01:26,590 So I will go ahead and do that by saying new heading dot ID equals task Dasch title. 16 00:01:26,610 --> 00:01:27,760 All right. 17 00:01:28,170 --> 00:01:37,890 Now we want to do is create a new text node or add a new text node by saying new heading Daut Penn child. 18 00:01:38,100 --> 00:01:39,930 We want a pen inside of it. 19 00:01:40,170 --> 00:01:47,040 And then to create a text no we do document Daut create text node and then whatever text we want. 20 00:01:47,040 --> 00:01:49,680 I'm just going to say task list. 21 00:01:50,650 --> 00:01:51,300 OK. 22 00:01:51,600 --> 00:01:55,460 So that will create the aliment if I save that you can see it down here. 23 00:01:55,470 --> 00:02:02,800 Now we want to get on the old hatting or the heading we want to replace. 24 00:02:02,850 --> 00:02:12,180 So we'll say conc old Hedding equals document Daut and let's use get element by d we haven't really 25 00:02:12,180 --> 00:02:18,220 used that as an idea of task dasht title. 26 00:02:18,540 --> 00:02:23,940 Now we're going to need a parent because we're going to use something called replace child and we need 27 00:02:23,940 --> 00:02:25,410 to call that on the parent. 28 00:02:25,410 --> 00:02:31,070 Now this H5 is inside of a div with the class of card action. 29 00:02:31,260 --> 00:02:33,050 So let's go ahead and do that. 30 00:02:33,060 --> 00:02:37,740 So we'll say parent and we'll call this card 31 00:02:40,320 --> 00:02:45,330 action and we'll set it to document my queries selector. 32 00:02:45,930 --> 00:02:50,910 And it's a class so dog cart action. 33 00:02:51,350 --> 00:02:54,570 And then let's do the replace. 34 00:02:54,780 --> 00:03:04,020 So to do that we'll see Card action Daut replace child put in what we want to replace it with which 35 00:03:04,020 --> 00:03:04,940 is the new heading. 36 00:03:04,950 --> 00:03:11,220 And then what we want to replace which is the old heading and save and now you can see that now we have 37 00:03:11,540 --> 00:03:19,130 an H to here with the class with the idea of task title and the text node of task list. 38 00:03:19,140 --> 00:03:22,560 All right so it's as easy as that to replace something. 39 00:03:22,560 --> 00:03:26,780 Now I want to show you how to remove something so let's go down here. 40 00:03:26,810 --> 00:03:32,070 Actually going to just get rid of that console log and we'll say remove element. 41 00:03:33,090 --> 00:03:39,990 So what I'm going to do is create a variable for the allies the list items. 42 00:03:39,990 --> 00:03:43,610 So we're going to use document Daut queries select. 43 00:03:43,620 --> 00:03:48,630 All I will say we want all the list items. 44 00:03:48,630 --> 00:03:58,600 I'm also going to create a variable for the list itself for the UL so document dot query selector. 45 00:03:59,040 --> 00:04:03,550 And that's going to be UL. 46 00:04:03,970 --> 00:04:10,180 So what I want to do is I want to remove a specific list item. 47 00:04:10,190 --> 00:04:12,430 OK so we have this allies 48 00:04:15,130 --> 00:04:24,370 so remember when we use query selector all we can access the elements with like allies 0 would be the 49 00:04:24,370 --> 00:04:25,310 first one. 50 00:04:25,510 --> 00:04:37,060 So let's say allies DOD 0 dot removed and save and that went ahead and removed the first list item. 51 00:04:37,510 --> 00:04:37,840 All right. 52 00:04:37,840 --> 00:04:39,580 So it's as easy as that to remove. 53 00:04:39,580 --> 00:04:41,280 Just call the Remove method. 54 00:04:41,280 --> 00:04:49,360 Now you can also removed by child so if we say remove child element what we're going to do is take the 55 00:04:49,360 --> 00:04:54,600 list which is the UL and we're going to just say Daut remove child 56 00:04:57,550 --> 00:05:06,070 and let's put in here we want to remove allies two or three and save. 57 00:05:06,100 --> 00:05:13,150 And now that removed the third one which was actually the fourth one down because there's zero based. 58 00:05:13,150 --> 00:05:13,350 All right. 59 00:05:13,360 --> 00:05:21,320 So can we can do remove We can also do remove child all right so now what I want to do is take a look 60 00:05:21,320 --> 00:05:27,300 at classes and attributes. 61 00:05:27,500 --> 00:05:32,500 All right so what I'll do is create a variable here I'm going to call it first lie. 62 00:05:32,880 --> 00:05:43,740 And I just want to get the first list item here so we're going to say document Daut query selector and 63 00:05:43,740 --> 00:05:45,600 we're going to get my 64 00:05:48,180 --> 00:05:51,620 first child OK. 65 00:05:52,300 --> 00:05:59,850 Now the element that I want to work with is actually the ATAC this the tag that's around this icon right 66 00:05:59,850 --> 00:06:00,460 here. 67 00:06:00,720 --> 00:06:12,830 So remember we can do console log so if we do first lie that gives us the list item I want the tag that's 68 00:06:12,830 --> 00:06:15,390 inside of it which is a child. 69 00:06:15,470 --> 00:06:23,090 So it's actually the first child so we can do dot children zero and save. 70 00:06:23,090 --> 00:06:25,000 And that gives us the ATAC. 71 00:06:25,010 --> 00:06:32,120 So what we're going to do is I'm going to put this into a variable so will say constant link and set 72 00:06:32,120 --> 00:06:33,010 that. 73 00:06:33,640 --> 00:06:35,780 OK so now we have the link to work with. 74 00:06:35,780 --> 00:06:42,860 So what I'm going to do is set our avowe variable because I'm going to want a console log a bunch of 75 00:06:42,860 --> 00:06:47,360 things just to kind of show you've. 76 00:06:47,750 --> 00:06:49,640 So it's a vow. 77 00:06:50,000 --> 00:06:50,830 Equals. 78 00:06:50,840 --> 00:06:54,900 And the first thing I want to look at is class name which we have used before. 79 00:06:55,310 --> 00:06:59,260 But what this does is it just gives us a string of the classes. 80 00:06:59,270 --> 00:07:05,090 So if we save that you can see it has a class of delete item and secondary content and if we look at 81 00:07:05,090 --> 00:07:09,800 the 8 that the link right here that's the two classes that it has. 82 00:07:10,040 --> 00:07:11,570 So that's what class named does. 83 00:07:11,570 --> 00:07:13,750 Now we also have a class list. 84 00:07:14,000 --> 00:07:23,930 So if we say thou equals link dot class list that gives us not an array it's actually a dom token list 85 00:07:24,530 --> 00:07:28,460 but it's set up like an array where we have 0 for the first one. 86 00:07:28,460 --> 00:07:30,880 One for the second one and so on. 87 00:07:30,890 --> 00:07:31,210 All right. 88 00:07:31,210 --> 00:07:40,480 We can access these individually if we say link doesn't have class list. 89 00:07:40,640 --> 00:07:48,730 0 and save we get delete item call right now we can also add a class using class list. 90 00:07:48,930 --> 00:07:58,620 So if we say link dog class list Daut ad and let's put in here test. 91 00:07:58,710 --> 00:07:59,110 All right. 92 00:07:59,130 --> 00:08:02,430 And then we'll console what will just said Vau. 93 00:08:03,060 --> 00:08:06,900 So we'll set out equals to link and let's see what that gives us. 94 00:08:06,900 --> 00:08:09,600 And you can see that there is now a test class in there. 95 00:08:09,660 --> 00:08:12,300 OK so we were able to add a class like that. 96 00:08:12,420 --> 00:08:19,710 We can also remove a class A copy this and we're going to say instead of add test we're going to remove 97 00:08:19,710 --> 00:08:22,730 test and now you can see it's gone. 98 00:08:22,770 --> 00:08:26,970 All right so you can easily add and remove classes this way. 99 00:08:26,970 --> 00:08:29,670 So now let's take a look at attributes. 100 00:08:29,690 --> 00:08:32,120 You want to put a comment here. 101 00:08:32,220 --> 00:08:33,440 Say classes 102 00:08:37,000 --> 00:08:39,240 attributes. 103 00:08:39,250 --> 00:08:43,600 All right so we're going to continue to work with this link variable. 104 00:08:43,600 --> 00:08:50,470 So let's say Val equals link and then we have a method called Get attribute. 105 00:08:50,520 --> 00:08:54,700 All right we can get a specific attribute Let's get the Tref. 106 00:08:54,910 --> 00:08:57,280 OK and that gives us the hash. 107 00:08:57,280 --> 00:08:58,930 Now we can also set it. 108 00:08:58,960 --> 00:09:06,250 So if we say Val equals let's do link got set attribute 109 00:09:09,190 --> 00:09:19,330 and we'll set the trough to HGP Google dot com and save. 110 00:09:19,330 --> 00:09:22,080 And now if I go in I click the first link here. 111 00:09:22,450 --> 00:09:23,980 It takes us to Google. 112 00:09:23,980 --> 00:09:31,510 All right so we're able to edit that attribute so we can also check to see if if there is an actual 113 00:09:31,510 --> 00:09:32,490 attribute. 114 00:09:32,500 --> 00:09:43,880 So if we say link die it has attribute and we test for a Tref and save we get true. 115 00:09:44,080 --> 00:09:49,890 If we said if we search for Title attribute which it doesn't have one we get false. 116 00:09:49,900 --> 00:09:50,170 All right. 117 00:09:50,170 --> 00:09:56,440 Now if we wanted to add a title attribute we could do that could say you don't need to do Val just to 118 00:09:56,440 --> 00:10:01,320 link dot set attribute. 119 00:10:01,420 --> 00:10:03,060 I think we've already done this. 120 00:10:03,120 --> 00:10:07,810 We'll see that title to Google save. 121 00:10:07,810 --> 00:10:09,910 Now we get true. 122 00:10:09,940 --> 00:10:17,290 All right if we want to just console dog or just save Val equals link so we can see what that looks 123 00:10:17,290 --> 00:10:20,310 like and you can see it's going to Google. 124 00:10:20,320 --> 00:10:23,040 It also has the title of Google. 125 00:10:23,470 --> 00:10:26,800 OK now if you want to remove an attribute we can do that as well. 126 00:10:27,070 --> 00:10:36,660 So we could say link Daut remove attribute and let's remove the title save. 127 00:10:36,690 --> 00:10:38,550 And now there's no longer a title. 128 00:10:38,550 --> 00:10:44,320 All right so you can do whatever you want with the classes the attributes and so on. 129 00:10:44,320 --> 00:10:50,030 All right so hopefully this helps you guys out a little bit to understand how to replace things remove 130 00:10:50,070 --> 00:10:53,840 things deal with some of these attributes for these elements. 131 00:10:54,060 --> 00:10:54,760 And that's it. 132 00:10:54,780 --> 00:10:56,130 I will see you in the next video.