It's time to start learning about methods of the dump, which are used to get individual and multiple
elements from the original document in this video, I'm going to show you what that element by its method
is and how to use it actually get element by its method is used to get individual elements from HTML.
This method returns the element that has the attribute with the specified value, and in order to get
the element, we need to indicate the relevant value of it attribute.
The idea is a string which can be used to uniquely identify the element found in the animal ID attribute.
Remember that you just need to write the value of an attribute without the pound sign, which is actually
used, for example, in success in order to select the element with ID.
All right, let's go back to develop tools and use Castle to demonstrate some examples in order to use
that element by idea method.
At first we need to write a document.
You remember that document is an object and get element by idea is it's built in method as it was unusual
object case.
We need to use dot notation to invoke this method.
So right dot get element by it.
Just for your information, remember that you must always protect the Campbell case method.
You need to write each word with capital letters except the first word get.
Now let's go to Element section.
Choose one of the elements, let's say Unordered List UL, which has the idea list, then write it inside
parentheses within quotes because it should be a string value.
You see that it has returned the usual element with its whole contents, I mean with this child, at
least elements and paragraphs.
All right.
Let's move on.
We can store this element in the variable as a value for that right element equals document dockett
element by ID.
Which is the least.
You see that we have undefined I hope that to guess why, that's because we have thought this element
in the variable on the fly and therefore we got default temporary value for variables that is undefined.
If we write element, then we will get the same UAL element.
OK.
As you remember, we said in previous video that everything in document is an object, so if we check
the data type of this variable using type of operator, so.
Right.
Type of.
El.
Then you will get an object.
As usual, in a similar document, the attributes are unique foreign elements, but in case of that,
there is more than one same idea attributes that get element by idea.
Method returns only the first found element.
In order to prove that, let's assign this same idea attribute to another element, for example, to
hedging element.
So right here it equals to at least.
Then press council plus enter.
Go back to Castle and store again the element in the variable.
Then check the value.
And you see that we have H2 heading out.
That's because that element by ID at first found this element with idee, least in a single document,
and returned it.
So, again, if we have same idea attributes, this method returns under the first found element.
All right.
Let's see what happens if the do attribute that is indicated in parentheses doesn't exist in XML document
that's capitalized the idee least.
Because of that, I'd attribute is case sensitive list with capital letters doesn't exist in a document
and the value of the variable element is now.
So remember, when you use that element by its method, but the idea doesn't exist.
You always get the value.
No.
OK, as we said, we can manipulate and change the content of the element for that, we use the properties
of the DOM and I'm going to describe and use in the future two main properties of DOM, and those are
text content and in our HTML.
At first, let's talk about text content.
Property it sets are returns, the textual content of the specified note and all its descendants and
descendants.
I mean the child of the element, the grandchild of the element and so on.
So when you have an element with children and grandchildren using text content property, you will get
the content of all those elements.
And if you set text content, property and child and grandchild, element will be removed and replaced
by a single text note.
Let's see what I'm talking about exactly.
Reload the page, then create again variable elements and get you elements using that element by ID.
Then using taxed county's property.
Let's get the content of your element.
So write the name of the variable elements, dot text content, property.
You see that we have the whole text content which exists in your element and what we see on the page,
if you take a look on Elements section, you can see that in your element we have inside the paragraphs,
the exact text notes, which we have just got in council.
So as we said, text content, property returns, the textual content of all its descendants.
And you see that in this case, the paragraphs are the grandchildren for you Will.
All right.
Text content allows us to set new content to elements using equals operator.
Let's reload the page and write again.
Variable element equal to document that gets element by ID and write the ID at least.
Then below right element elements, text content equals to hello.
So you see that here we have hello in council and also on the page instead of the notes.
If you take a look on HTML document, you will see that all the descendants of your element with their
text content are removed and they are replaced with just hello.
All right, now I want to show you another way how to set and change the content of an element that
I'm going to assign the attribute to having element for a while.
So that's all right here heading.
Now in Castle, create variable hiding and store in it text content of two heading element, so write
variable heading equals document that get element by ID and pass the ID heading that dot text content.
And now let's see what we have right heading, and I see that we have note manager
now get again the usual element, right?
Variable you will.
Equals to document, not get by ID and pass the ID least.
And now A the text content in the following way, right, the name of the variable you will aliment.
That dot text content equals to heading.
So you see that we have note manager on the page, the text content of a heading element.
All right, let's move on and talk about a property in their e-mail sets, are returns the actual content
of an element?
In other words, it returns the whole Actimel contents, including tax attributes and tax notes as a
string.
OK, now let's get again the usual element, right, variable l equals to document dogs, cats, 11
by ID.
With at least.
Then use in your property and write Eldard in your HTML.
You see that we have the whole content of the fuel element with its tax attributes and taxed as a string.
Now that said, the original content using again in our property.
So right eldard in our HTML
and set it to hello.
You see that we have hello on the page instead of the whole conference that we had before in this case
in HTML and text content properties work in the same way.
But if we write hello within each one heading tuks.
Then it will output on the page.
Hello as a heading, and if we take a look on Aliment section, then you will see that this hatting
element actually exists in ice HTML document.
Now, let's see what happens if we do the same using Texican and property rights, 11. tax content.
And the same value, hello within H1 tax.
You see that we got one tax as a plain text on the page.
If you check it in Elements section, you will see that the same we have inside the fuel element.
That is the main difference between tax content and in our e-mail properties.
So, again, tax content, property sets and returns takes note of the element.
And in your e-mail sets and the returns, html content of the elements.
All right, in this lecture, we have learned how to get an individual elements using that element by
idee method.
We have seen how text content and interaction with properties work and what is the difference between
them.
Let's go ahead.