Let's now learn how to get tag attributes. Here the following rule applies: each attribute of the tag corresponds to the DOM element's property of the same name.
Let's look at an example. Let's say we have this tag:
<input id="elem" type="text">
Get a reference to our element into a variable:
let elem = document.querySelector('#elem');
Derive the values of the attributes we need:
console.log(elem.id); // shows 'elem'
console.log(elem.type); // shows 'text'
And now let's change the value of the attribute:
elem.type = 'submit';
Given the following input:
<input id="elem" type="email">
There is also a button. On clicking
the button, display the contents of
the attribute type
of the
above input.
Given the following input:
<input id="elem" type="email">
There is also a button. When the
button is clicked, write the value
submit
to the type
attribute.
Suppose you have a link in the form of a tag
a
,
a button and a paragraph. On clicking the
button, output the contents of the link
attribute href
into the paragraph.
Suppose you have a link and a button. On
clicking the button, add the contents of
its attribute href
to the end of
the link text in parentheses.
Let's say you have a picture. Place
it on the page using the tag
img
.
Let a button and a paragraph be given as well.
Make it so that when you click on the button,
the path to the image from its attribute
src
is written to the paragraph.
Given a picture in the img
tag and
a button. By pressing the button write down
the value 300
in the attribute
width
.
Given a picture in the img
tag and
a button. Let the attribute width
be set to some width. Make a button, upon
clicking on which the width of the image
will increase by 2
times.
Let's say you have two pictures. Make an
img
tag and two buttons on the page.
On pressing the first button, write the
path to the first picture in the src
attribute, and on pressing the second
button, write the path to the second
picture.