In order to manipulate on attributes, don't allow us to use several methods.
The first method, which I would like to introduce you is get attribute.
It returns the value of the attribute with the specified name of the element.
The value that is returned using this method is that string.
OK, let's go to developer tools and use that attribute method.
At first, select one of the elements from the HDMI file, let's say development, which has a class
name wrapper.
So let's write a variable D equals document dot query selector.
And then right, deep thought rapper.
That use get attribute method, so right, deep thoughts, get attribute.
And inside the parentheses that indicate the attribute klus.
So we have a rapper, which is a class name of that element, if we specify the attribute inside parentheses,
which actually doesn't exist, for example, ID.
Then get attribute, method will return null.
So again, get a throughput metal is used to get a value of an element attribute.
All right.
The second method, which is used in order to manipulate on aliments attributes, is set attribute method,
which sets the value of an attribute on the specified element.
If the attribute already exists, the value is updated.
Otherwise, a new attribute is added with a specified name and value set.
Attribute method uses two parameters.
First, one is an attribute name and the second one is attribute value unit to pass both of them as
string values.
All right, let's go back to developer tools and use that attribute method.
So right def dot set attribute and write as a first parameter.
This tile attribute.
And then change the background color of the elements, right background, let's say coral.
So you see that development has changed its background color.
If we check this element in extremophile will find that it has a new attribute style with its value
background, coral using set attribute method you can assign to elements and attributes you want, like
idee title, a reference name and so on.
Besides the get and set attributes, we have other methods like remove attribute and has attributes.
The first one removes the attribute from the element.
So if we write your deep thought, remove attribute and then indicate the attribute as a tile.
Then they shall attribute will be removed and development will get back its recent background using
second method, which is has attributes we can check if the element has achieved or not, this method,
which boolean value true and false.
So.
Right, Steve Dot has attribute.
And then check if the deep element has the attribute style.
So right here you see that we have false because this towel attribute is already removed and doesn't
exist.
All right.
Now, I'm going to write a little example using set attribute method and also the click event on Button.
And I want to change type of that input, make it as a submit button and also as a value.
I want to use the text that I will enter here.
So let's do it in order to select those two elements at first, look at the original file.
So we have here four elements, which includes both input elements.
They have the idea attributes, add input and add button.
So let's use these attributes and select elements, go back to cryptologist file and write a variable
pattern.
Equals documents, DOT gets element by ID.
And insert here the idea of button add button.
Then rights variable input equals documents that get by ID.
And pass the ID that input.
As I said, I'm going to use click event.
Therefore, we need to attach to the button element at event listener.
So.
Right, Betty Dot at Event Listener.
Then right here, click event.
And also the function.
Here we will face up to one unexpected thing, and in order to show that I'm going to right here, cancel
that log.
Hello, world.
Then reload.
Click on button.
And you notice that the text, hello, world is blinking when I press on the button.
The reason is that the type of that button is submit and on click event, it actually refresh the page.
So we need to somehow avoid this fact.
We can use event object and the method of it, which is called prevent default.
This method prevents submitting it for one week.
Click on the submit button.
So let's pass it as a parameter and then we start the this right e dot prevent default.
Then reload, click on the submit button and see that page is not refreshed anymore, and we have Hello
World in Council.
All right, let's go ahead and delete these line of code now, I'm going to change the type value of
the input element I submit using set attribute method.
So write input that set attribute.
Then we need to indicate type attribute and then it's value submit.
Also, I'm going to change the value of value attribute and grab the text that I will enter in the form
for that, we need to write input that set attribute.
Then right here, the attribute value.
And then we need to grab the text, which I will answer, so for that we need to write input that value.
OK, everything is ready.
Let's reload.
Type here, for example, click me after that click on add button.
And here we go.
We have transformed the input element into submit button.
All right.
It was a little example, and I showed it to you in order to demonstrate how we can manipulate on elements
using dumb, stupid methods, that's more.