In previous lecture, we have talked about how to get and manipulate on individual elements using get
element by idea method.
In this video you will learn about another method which selects an individual element from Actimel document
as well.
This method is called Querrey selection method.
The we select a method, which is the first element that matches a specified CSF selector in the document.
Remember that it only returns the first element that matches the specified selected.
If query selector cannot find the relevant element, then it returns null as it was in case of element
by ID.
When we use query selector method inside the parentheses, we need to write the argument.
I mean selector as a string passing the string argument always must to follow CSF syntax.
So if you are familiar with Cassus or at least know the ABC of it, then you won't have any trouble
with that method.
OK, let's go to developer tools and see some examples as it was in case of get element by idee method,
we need to attach query selector in the same way to document object using dot notation.
So let's create element and select elements.
Write variable L equals documents.
Dot query selector.
And inside the parentheses, let's write you out.
You remember that in case of get alarmed by ID, we needed to assign an I.D. to elements and then indicated
inside parentheses.
But when we use Quarrie Selector, we don't need to do that.
We just can select an element using its tag name or its attribute.
So in this case, we selected you all elements and query selected method will return you well with its
whole contents.
So you see that we have corrupt elements from A.T.M. document.
In order to change and manipulate on its content, we can use the same properties we have already seen,
I mean, text content and in our HTML they work in the exact same way.
So let's change the content of you well, and write l dot text content.
And static content as hello world.
So you see that we have a world on the page and in the same way, you can use intellectual property
and change the content of your argument.
I'm not going to waste time on that.
Let's move on in order to select elements by attributes using Querrey, select a method, we need to
indicate value of attributes with relevant sites as it's in case of, for example, ID, which uses
Pouncy and class attribute, which uses Dutson because query selected does not select elements with
any specified attributes.
I like to get aliment by IID method.
Let's take a look on our original document in header elements.
We have form with Idiz search note.
So let's get this element and write inside parentheses sine and the value of ID search note.
And here we go.
All right, as we said in the beginning of this lecture, chorus lecture method returns only the first
element with specified selecter.
Let's prove it and select a list element.
So right inside the parentheses, you will I.
Here we have first list element, but what can we do if we want to select second or third list elements,
CSF three gives us a solution about it.
We can use a bit more complex selector and child which matches every element that is the end child regardless
of type of its parent.
Let's select second list element and write inside the parentheses you I then column and child, then
open again parentheses and indicate the number two because we need to select second list element.
So you see that we have a second list that's dropped on it, and you can see that it includes two elements
which are used for some icons.
I mean, added and delete icons, which you see on the page.
Let's select and get second delete icon.
In order to avoid typing, we can use our variable in which we have our restored grant parent of icons.
So right l dot Quarrie Selecter.
Then inside the parentheses, right, parlement.
Which is the parent of elements and then the last name of delete icon elements DOT as a.
Type's.
So we have selected the elite icon of second note, and you can see it on the page if you holper on
that element.
By the way, as you have just seen, we can use Querrey selector method not only with document object,
but with other elements in this case with variable in which was stored grandparent list element, query
selection method allows us to do that.
But that element by it does not, because generally the attribute is considered as a unique attribute
for aliments.
All right, so in this lecture, we have learned about second method, which is used to select any of
the individual HTML elements and to manipulate on them.
See you in the next video.