Tag attributes as properties in JavaScript

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.

enru