Atributos de etiquetas como propiedades en JavaScript

Aprendamos ahora a obtener los atributos de las etiquetas. Aquí se aplica la siguiente regla: cada atributo de etiqueta corresponde a una propiedad del elemento DOM del mismo nombre.

Veamos un ejemplo. Supongamos que tenemos la siguiente etiqueta:

<input id="elem" type="text">

Obtengamos una referencia a nuestro elemento en una variable:

let elem = document.querySelector('#elem');

Mostremos los valores de los atributos que necesitamos:

console.log(elem.id);   // mostrará 'elem'
console.log(elem.type); // mostrará 'text'

Y ahora, como ejemplo, cambiemos el valor del atributo:

elem.type = 'submit';

Se da el siguiente input:

<input id="elem" type="email">

También se da un botón. Al hacer clic en el botón, muestre en pantalla el contenido del atributo type del input mencionado anteriormente.

Se da el siguiente input:

<input id="elem" type="email">

También se da un botón. Al hacer clic en el botón, escriba en el atributo type el valor submit.

Supongamos que tiene un enlace en forma de etiqueta a, un botón y un párrafo. Al hacer clic en el botón, muestre en el párrafo el contenido del atributo href del enlace.

Supongamos que tiene un enlace y un botón. Al hacer clic en el botón, agregue al final del texto del enlace el contenido de su atributo href entre paréntesis redondos.

Supongamos que tiene una imagen. Colóquela en la página usando la etiqueta img. Supongamos que también se dan un botón y un párrafo. Haga que al hacer clic en el botón, se escriba en el párrafo la ruta de la imagen desde su atributo src.

Se da una imagen en la etiqueta img y un botón. Al hacer clic en el botón, escriba en el atributo width el valor 300.

Se da una imagen en la etiqueta img y un botón. Supongamos que en el atributo width se establece un cierto ancho. Cree un botón, al hacer clic en el cual el ancho de la imagen aumentará 2 veces.

Supongamos que tiene dos imágenes. Cree en la página la etiqueta img y dos botones. Al hacer clic en el primer botón, escriba en el atributo src la ruta a la primera imagen, y al hacer clic en el segundo, la ruta a la segunda imagen.