WEBVTT 00:00.990 --> 00:06.920 In order to manipulate on attributes, don't allow us to use several methods. 00:07.500 --> 00:11.730 The first method, which I would like to introduce you is get attribute. 00:12.240 --> 00:16.560 It returns the value of the attribute with the specified name of the element. 00:17.190 --> 00:20.290 The value that is returned using this method is that string. 00:21.450 --> 00:25.830 OK, let's go to developer tools and use that attribute method. 00:26.190 --> 00:34.170 At first, select one of the elements from the HDMI file, let's say development, which has a class 00:34.170 --> 00:35.120 name wrapper. 00:36.390 --> 00:42.480 So let's write a variable D equals document dot query selector. 00:46.260 --> 00:49.110 And then right, deep thought rapper. 00:54.620 --> 00:59.390 That use get attribute method, so right, deep thoughts, get attribute. 01:02.560 --> 01:06.820 And inside the parentheses that indicate the attribute klus. 01:09.500 --> 01:18.200 So we have a rapper, which is a class name of that element, if we specify the attribute inside parentheses, 01:18.200 --> 01:22.100 which actually doesn't exist, for example, ID. 01:23.740 --> 01:26.430 Then get attribute, method will return null. 01:27.940 --> 01:33.380 So again, get a throughput metal is used to get a value of an element attribute. 01:34.990 --> 01:35.460 All right. 01:36.280 --> 01:42.520 The second method, which is used in order to manipulate on aliments attributes, is set attribute method, 01:43.300 --> 01:46.860 which sets the value of an attribute on the specified element. 01:47.920 --> 01:51.810 If the attribute already exists, the value is updated. 01:52.330 --> 01:57.430 Otherwise, a new attribute is added with a specified name and value set. 01:57.430 --> 01:59.550 Attribute method uses two parameters. 01:59.950 --> 02:06.700 First, one is an attribute name and the second one is attribute value unit to pass both of them as 02:06.700 --> 02:07.690 string values. 02:08.740 --> 02:13.190 All right, let's go back to developer tools and use that attribute method. 02:13.840 --> 02:22.160 So right def dot set attribute and write as a first parameter. 02:22.180 --> 02:23.320 This tile attribute. 02:26.160 --> 02:32.790 And then change the background color of the elements, right background, let's say coral. 02:35.480 --> 02:38.760 So you see that development has changed its background color. 02:39.650 --> 02:46.760 If we check this element in extremophile will find that it has a new attribute style with its value 02:46.760 --> 02:54.590 background, coral using set attribute method you can assign to elements and attributes you want, like 02:54.590 --> 02:57.830 idee title, a reference name and so on. 02:59.180 --> 03:04.820 Besides the get and set attributes, we have other methods like remove attribute and has attributes. 03:05.360 --> 03:08.580 The first one removes the attribute from the element. 03:09.080 --> 03:19.730 So if we write your deep thought, remove attribute and then indicate the attribute as a tile. 03:23.000 --> 03:30.800 Then they shall attribute will be removed and development will get back its recent background using 03:30.800 --> 03:36.770 second method, which is has attributes we can check if the element has achieved or not, this method, 03:36.770 --> 03:38.870 which boolean value true and false. 03:39.410 --> 03:39.710 So. 03:39.710 --> 03:41.720 Right, Steve Dot has attribute. 03:44.040 --> 03:47.870 And then check if the deep element has the attribute style. 03:47.880 --> 03:54.930 So right here you see that we have false because this towel attribute is already removed and doesn't 03:54.930 --> 03:55.340 exist. 03:56.910 --> 03:57.370 All right. 03:58.230 --> 04:04.500 Now, I'm going to write a little example using set attribute method and also the click event on Button. 04:04.500 --> 04:12.150 And I want to change type of that input, make it as a submit button and also as a value. 04:12.150 --> 04:14.970 I want to use the text that I will enter here. 04:15.900 --> 04:21.480 So let's do it in order to select those two elements at first, look at the original file. 04:23.220 --> 04:30.090 So we have here four elements, which includes both input elements. 04:30.850 --> 04:34.690 They have the idea attributes, add input and add button. 04:35.430 --> 04:42.490 So let's use these attributes and select elements, go back to cryptologist file and write a variable 04:42.490 --> 04:43.020 pattern. 04:44.520 --> 04:47.760 Equals documents, DOT gets element by ID. 04:51.040 --> 04:56.860 And insert here the idea of button add button. 04:59.660 --> 05:05.600 Then rights variable input equals documents that get by ID. 05:09.580 --> 05:11.920 And pass the ID that input. 05:17.400 --> 05:19.970 As I said, I'm going to use click event. 05:20.160 --> 05:24.070 Therefore, we need to attach to the button element at event listener. 05:24.480 --> 05:24.750 So. 05:24.750 --> 05:28.320 Right, Betty Dot at Event Listener. 05:32.380 --> 05:35.110 Then right here, click event. 05:36.390 --> 05:37.710 And also the function. 05:41.470 --> 05:48.970 Here we will face up to one unexpected thing, and in order to show that I'm going to right here, cancel 05:48.970 --> 05:49.540 that log. 05:51.250 --> 05:52.240 Hello, world. 05:56.810 --> 05:57.770 Then reload. 05:59.330 --> 06:00.290 Click on button. 06:01.480 --> 06:05.540 And you notice that the text, hello, world is blinking when I press on the button. 06:06.430 --> 06:12.830 The reason is that the type of that button is submit and on click event, it actually refresh the page. 06:13.780 --> 06:16.120 So we need to somehow avoid this fact. 06:16.600 --> 06:21.450 We can use event object and the method of it, which is called prevent default. 06:22.300 --> 06:25.000 This method prevents submitting it for one week. 06:25.000 --> 06:26.320 Click on the submit button. 06:27.310 --> 06:37.150 So let's pass it as a parameter and then we start the this right e dot prevent default. 06:42.250 --> 06:50.890 Then reload, click on the submit button and see that page is not refreshed anymore, and we have Hello 06:50.890 --> 06:51.910 World in Council. 06:54.210 --> 07:01.930 All right, let's go ahead and delete these line of code now, I'm going to change the type value of 07:01.930 --> 07:05.220 the input element I submit using set attribute method. 07:06.330 --> 07:10.080 So write input that set attribute. 07:13.920 --> 07:21.060 Then we need to indicate type attribute and then it's value submit. 07:25.510 --> 07:31.860 Also, I'm going to change the value of value attribute and grab the text that I will enter in the form 07:32.500 --> 07:37.030 for that, we need to write input that set attribute. 07:40.440 --> 07:43.620 Then right here, the attribute value. 07:47.100 --> 07:54.780 And then we need to grab the text, which I will answer, so for that we need to write input that value. 07:59.690 --> 08:01.890 OK, everything is ready. 08:02.780 --> 08:03.920 Let's reload. 08:05.450 --> 08:13.190 Type here, for example, click me after that click on add button. 08:13.220 --> 08:14.330 And here we go. 08:15.320 --> 08:19.450 We have transformed the input element into submit button. 08:22.080 --> 08:22.530 All right. 08:24.320 --> 08:30.290 It was a little example, and I showed it to you in order to demonstrate how we can manipulate on elements 08:30.680 --> 08:34.290 using dumb, stupid methods, that's more.