WEBVTT 00:02.010 --> 00:08.160 It's time to start learning about methods of the dump, which are used to get individual and multiple 00:08.160 --> 00:14.250 elements from the original document in this video, I'm going to show you what that element by its method 00:14.250 --> 00:22.390 is and how to use it actually get element by its method is used to get individual elements from HTML. 00:23.070 --> 00:30.360 This method returns the element that has the attribute with the specified value, and in order to get 00:30.360 --> 00:34.380 the element, we need to indicate the relevant value of it attribute. 00:35.710 --> 00:44.080 The idea is a string which can be used to uniquely identify the element found in the animal ID attribute. 00:45.400 --> 00:51.250 Remember that you just need to write the value of an attribute without the pound sign, which is actually 00:51.250 --> 00:55.930 used, for example, in success in order to select the element with ID. 00:57.440 --> 01:06.050 All right, let's go back to develop tools and use Castle to demonstrate some examples in order to use 01:06.050 --> 01:07.530 that element by idea method. 01:07.550 --> 01:10.250 At first we need to write a document. 01:12.500 --> 01:20.390 You remember that document is an object and get element by idea is it's built in method as it was unusual 01:20.390 --> 01:21.400 object case. 01:21.830 --> 01:24.690 We need to use dot notation to invoke this method. 01:25.220 --> 01:27.680 So right dot get element by it. 01:29.720 --> 01:34.970 Just for your information, remember that you must always protect the Campbell case method. 01:35.990 --> 01:41.040 You need to write each word with capital letters except the first word get. 01:42.800 --> 01:44.800 Now let's go to Element section. 01:45.500 --> 01:55.480 Choose one of the elements, let's say Unordered List UL, which has the idea list, then write it inside 01:55.490 --> 02:01.130 parentheses within quotes because it should be a string value. 02:03.230 --> 02:10.580 You see that it has returned the usual element with its whole contents, I mean with this child, at 02:10.580 --> 02:12.320 least elements and paragraphs. 02:13.970 --> 02:14.450 All right. 02:15.990 --> 02:16.900 Let's move on. 02:17.910 --> 02:28.290 We can store this element in the variable as a value for that right element equals document dockett 02:28.290 --> 02:29.460 element by ID. 02:33.010 --> 02:34.090 Which is the least. 02:36.520 --> 02:44.500 You see that we have undefined I hope that to guess why, that's because we have thought this element 02:44.500 --> 02:51.910 in the variable on the fly and therefore we got default temporary value for variables that is undefined. 02:52.840 --> 02:57.440 If we write element, then we will get the same UAL element. 02:58.870 --> 02:59.290 OK. 03:00.830 --> 03:07.070 As you remember, we said in previous video that everything in document is an object, so if we check 03:07.070 --> 03:11.690 the data type of this variable using type of operator, so. 03:11.690 --> 03:11.990 Right. 03:11.990 --> 03:12.800 Type of. 03:13.950 --> 03:14.400 El. 03:17.050 --> 03:19.060 Then you will get an object. 03:21.650 --> 03:29.000 As usual, in a similar document, the attributes are unique foreign elements, but in case of that, 03:29.150 --> 03:34.500 there is more than one same idea attributes that get element by idea. 03:34.520 --> 03:37.220 Method returns only the first found element. 03:38.570 --> 03:46.400 In order to prove that, let's assign this same idea attribute to another element, for example, to 03:46.400 --> 03:47.340 hedging element. 03:48.710 --> 03:51.650 So right here it equals to at least. 03:55.270 --> 03:58.540 Then press council plus enter. 03:59.990 --> 04:04.400 Go back to Castle and store again the element in the variable. 04:10.800 --> 04:12.150 Then check the value. 04:14.080 --> 04:17.590 And you see that we have H2 heading out. 04:18.860 --> 04:25.990 That's because that element by ID at first found this element with idee, least in a single document, 04:25.990 --> 04:26.920 and returned it. 04:27.850 --> 04:34.990 So, again, if we have same idea attributes, this method returns under the first found element. 04:36.520 --> 04:37.000 All right. 04:38.650 --> 04:45.420 Let's see what happens if the do attribute that is indicated in parentheses doesn't exist in XML document 04:46.050 --> 04:49.300 that's capitalized the idee least. 04:53.750 --> 05:01.190 Because of that, I'd attribute is case sensitive list with capital letters doesn't exist in a document 05:01.610 --> 05:04.970 and the value of the variable element is now. 05:07.100 --> 05:13.740 So remember, when you use that element by its method, but the idea doesn't exist. 05:13.760 --> 05:15.390 You always get the value. 05:15.410 --> 05:15.860 No. 05:17.890 --> 05:28.360 OK, as we said, we can manipulate and change the content of the element for that, we use the properties 05:28.360 --> 05:35.770 of the DOM and I'm going to describe and use in the future two main properties of DOM, and those are 05:35.770 --> 05:38.480 text content and in our HTML. 05:40.840 --> 05:43.140 At first, let's talk about text content. 05:43.150 --> 05:51.970 Property it sets are returns, the textual content of the specified note and all its descendants and 05:51.970 --> 05:52.630 descendants. 05:52.630 --> 05:57.080 I mean the child of the element, the grandchild of the element and so on. 05:57.670 --> 06:04.840 So when you have an element with children and grandchildren using text content property, you will get 06:04.840 --> 06:07.000 the content of all those elements. 06:08.050 --> 06:15.580 And if you set text content, property and child and grandchild, element will be removed and replaced 06:15.580 --> 06:16.940 by a single text note. 06:18.160 --> 06:20.560 Let's see what I'm talking about exactly. 06:22.540 --> 06:33.220 Reload the page, then create again variable elements and get you elements using that element by ID. 06:39.000 --> 06:41.350 Then using taxed county's property. 06:41.370 --> 06:44.650 Let's get the content of your element. 06:45.000 --> 06:50.820 So write the name of the variable elements, dot text content, property. 06:53.200 --> 07:00.940 You see that we have the whole text content which exists in your element and what we see on the page, 07:02.560 --> 07:08.290 if you take a look on Elements section, you can see that in your element we have inside the paragraphs, 07:08.290 --> 07:11.880 the exact text notes, which we have just got in council. 07:13.000 --> 07:18.850 So as we said, text content, property returns, the textual content of all its descendants. 07:19.360 --> 07:23.830 And you see that in this case, the paragraphs are the grandchildren for you Will. 07:25.810 --> 07:26.350 All right. 07:27.490 --> 07:32.990 Text content allows us to set new content to elements using equals operator. 07:34.180 --> 07:37.060 Let's reload the page and write again. 07:38.650 --> 07:48.310 Variable element equal to document that gets element by ID and write the ID at least. 07:51.020 --> 07:59.060 Then below right element elements, text content equals to hello. 08:02.790 --> 08:08.910 So you see that here we have hello in council and also on the page instead of the notes. 08:11.730 --> 08:18.420 If you take a look on HTML document, you will see that all the descendants of your element with their 08:18.420 --> 08:23.760 text content are removed and they are replaced with just hello. 08:26.360 --> 08:34.850 All right, now I want to show you another way how to set and change the content of an element that 08:34.850 --> 08:38.880 I'm going to assign the attribute to having element for a while. 08:39.980 --> 08:42.200 So that's all right here heading. 08:47.270 --> 08:56.120 Now in Castle, create variable hiding and store in it text content of two heading element, so write 08:56.120 --> 09:07.160 variable heading equals document that get element by ID and pass the ID heading that dot text content. 09:10.350 --> 09:16.110 And now let's see what we have right heading, and I see that we have note manager 09:18.750 --> 09:21.660 now get again the usual element, right? 09:22.170 --> 09:24.270 Variable you will. 09:27.610 --> 09:34.540 Equals to document, not get by ID and pass the ID least. 09:39.530 --> 09:46.610 And now A the text content in the following way, right, the name of the variable you will aliment. 09:49.530 --> 09:53.700 That dot text content equals to heading. 09:57.040 --> 10:03.100 So you see that we have note manager on the page, the text content of a heading element. 10:05.350 --> 10:14.740 All right, let's move on and talk about a property in their e-mail sets, are returns the actual content 10:14.740 --> 10:15.370 of an element? 10:16.230 --> 10:23.590 In other words, it returns the whole Actimel contents, including tax attributes and tax notes as a 10:23.590 --> 10:24.160 string. 10:26.470 --> 10:35.800 OK, now let's get again the usual element, right, variable l equals to document dogs, cats, 11 10:35.800 --> 10:36.490 by ID. 10:39.320 --> 10:40.700 With at least. 10:43.530 --> 10:49.280 Then use in your property and write Eldard in your HTML. 10:52.640 --> 11:00.060 You see that we have the whole content of the fuel element with its tax attributes and taxed as a string. 11:01.850 --> 11:06.140 Now that said, the original content using again in our property. 11:06.540 --> 11:09.950 So right eldard in our HTML 11:12.410 --> 11:14.660 and set it to hello. 11:18.330 --> 11:25.470 You see that we have hello on the page instead of the whole conference that we had before in this case 11:25.470 --> 11:29.790 in HTML and text content properties work in the same way. 11:30.340 --> 11:36.600 But if we write hello within each one heading tuks. 11:41.710 --> 11:43.990 Then it will output on the page. 11:44.320 --> 11:52.300 Hello as a heading, and if we take a look on Aliment section, then you will see that this hatting 11:52.330 --> 11:55.270 element actually exists in ice HTML document. 11:57.820 --> 12:07.570 Now, let's see what happens if we do the same using Texican and property rights, 11. tax content. 12:10.350 --> 12:14.820 And the same value, hello within H1 tax. 12:17.570 --> 12:22.320 You see that we got one tax as a plain text on the page. 12:23.600 --> 12:29.960 If you check it in Elements section, you will see that the same we have inside the fuel element. 12:31.280 --> 12:36.500 That is the main difference between tax content and in our e-mail properties. 12:37.640 --> 12:43.820 So, again, tax content, property sets and returns takes note of the element. 12:44.300 --> 12:49.580 And in your e-mail sets and the returns, html content of the elements. 12:51.960 --> 12:59.610 All right, in this lecture, we have learned how to get an individual elements using that element by 12:59.610 --> 13:00.280 idee method. 13:00.930 --> 13:07.410 We have seen how text content and interaction with properties work and what is the difference between 13:07.410 --> 13:07.680 them. 13:09.450 --> 13:10.230 Let's go ahead.