WEBVTT 00:00.870 --> 00:07.080 In previous lecture, we have talked about how to get and manipulate on individual elements using get 00:07.080 --> 00:08.290 element by idea method. 00:08.970 --> 00:15.900 In this video you will learn about another method which selects an individual element from Actimel document 00:15.900 --> 00:16.350 as well. 00:17.220 --> 00:20.120 This method is called Querrey selection method. 00:20.850 --> 00:28.040 The we select a method, which is the first element that matches a specified CSF selector in the document. 00:28.860 --> 00:34.020 Remember that it only returns the first element that matches the specified selected. 00:34.290 --> 00:41.570 If query selector cannot find the relevant element, then it returns null as it was in case of element 00:41.640 --> 00:42.330 by ID. 00:43.560 --> 00:48.720 When we use query selector method inside the parentheses, we need to write the argument. 00:49.200 --> 00:58.080 I mean selector as a string passing the string argument always must to follow CSF syntax. 00:58.860 --> 01:05.790 So if you are familiar with Cassus or at least know the ABC of it, then you won't have any trouble 01:05.790 --> 01:06.660 with that method. 01:08.460 --> 01:16.920 OK, let's go to developer tools and see some examples as it was in case of get element by idee method, 01:16.930 --> 01:23.540 we need to attach query selector in the same way to document object using dot notation. 01:23.970 --> 01:27.720 So let's create element and select elements. 01:27.840 --> 01:31.440 Write variable L equals documents. 01:31.440 --> 01:34.590 Dot query selector. 01:37.840 --> 01:41.240 And inside the parentheses, let's write you out. 01:42.460 --> 01:50.830 You remember that in case of get alarmed by ID, we needed to assign an I.D. to elements and then indicated 01:50.830 --> 01:51.880 inside parentheses. 01:52.480 --> 01:55.390 But when we use Quarrie Selector, we don't need to do that. 01:55.900 --> 01:59.960 We just can select an element using its tag name or its attribute. 02:00.580 --> 02:07.450 So in this case, we selected you all elements and query selected method will return you well with its 02:07.470 --> 02:08.440 whole contents. 02:10.700 --> 02:15.260 So you see that we have corrupt elements from A.T.M. document. 02:17.300 --> 02:23.410 In order to change and manipulate on its content, we can use the same properties we have already seen, 02:23.660 --> 02:28.960 I mean, text content and in our HTML they work in the exact same way. 02:29.360 --> 02:35.120 So let's change the content of you well, and write l dot text content. 02:37.720 --> 02:40.960 And static content as hello world. 02:43.200 --> 02:50.160 So you see that we have a world on the page and in the same way, you can use intellectual property 02:50.160 --> 02:53.350 and change the content of your argument. 02:54.600 --> 02:56.790 I'm not going to waste time on that. 02:57.830 --> 03:05.780 Let's move on in order to select elements by attributes using Querrey, select a method, we need to 03:05.780 --> 03:12.560 indicate value of attributes with relevant sites as it's in case of, for example, ID, which uses 03:12.570 --> 03:19.820 Pouncy and class attribute, which uses Dutson because query selected does not select elements with 03:19.830 --> 03:21.350 any specified attributes. 03:21.740 --> 03:24.270 I like to get aliment by IID method. 03:25.520 --> 03:31.090 Let's take a look on our original document in header elements. 03:32.570 --> 03:36.980 We have form with Idiz search note. 03:37.940 --> 03:52.280 So let's get this element and write inside parentheses sine and the value of ID search note. 03:55.720 --> 03:58.270 And here we go. 04:00.180 --> 04:06.870 All right, as we said in the beginning of this lecture, chorus lecture method returns only the first 04:06.870 --> 04:09.530 element with specified selecter. 04:10.080 --> 04:13.380 Let's prove it and select a list element. 04:14.700 --> 04:17.730 So right inside the parentheses, you will I. 04:22.480 --> 04:30.280 Here we have first list element, but what can we do if we want to select second or third list elements, 04:31.660 --> 04:34.390 CSF three gives us a solution about it. 04:34.420 --> 04:44.350 We can use a bit more complex selector and child which matches every element that is the end child regardless 04:44.350 --> 04:45.910 of type of its parent. 04:47.210 --> 04:59.440 Let's select second list element and write inside the parentheses you I then column and child, then 04:59.440 --> 05:11.320 open again parentheses and indicate the number two because we need to select second list element. 05:14.670 --> 05:25.740 So you see that we have a second list that's dropped on it, and you can see that it includes two elements 05:26.130 --> 05:28.560 which are used for some icons. 05:28.830 --> 05:33.060 I mean, added and delete icons, which you see on the page. 05:33.750 --> 05:36.810 Let's select and get second delete icon. 05:37.440 --> 05:45.390 In order to avoid typing, we can use our variable in which we have our restored grant parent of icons. 05:46.800 --> 05:51.390 So right l dot Quarrie Selecter. 05:54.940 --> 05:58.960 Then inside the parentheses, right, parlement. 06:01.710 --> 06:11.430 Which is the parent of elements and then the last name of delete icon elements DOT as a. 06:13.000 --> 06:13.510 Type's. 06:15.690 --> 06:23.670 So we have selected the elite icon of second note, and you can see it on the page if you holper on 06:23.670 --> 06:24.390 that element. 06:26.250 --> 06:31.860 By the way, as you have just seen, we can use Querrey selector method not only with document object, 06:31.860 --> 06:39.600 but with other elements in this case with variable in which was stored grandparent list element, query 06:39.600 --> 06:41.640 selection method allows us to do that. 06:41.790 --> 06:48.420 But that element by it does not, because generally the attribute is considered as a unique attribute 06:48.420 --> 06:49.200 for aliments. 06:51.100 --> 06:57.820 All right, so in this lecture, we have learned about second method, which is used to select any of 06:57.820 --> 07:01.870 the individual HTML elements and to manipulate on them. 07:03.280 --> 07:04.450 See you in the next video.