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:
html<input id="elem" type="text">
Obtengamos una referencia a nuestro elemento en una variable:
javascriptlet elem = document.querySelector('#elem');
Mostremos los valores de los atributos que necesitamos:
javascriptconsole.log(elem.id); // mostrará 'elem'
console.log(elem.type); // mostrará 'text'
Y ahora, como ejemplo, cambiemos el valor del atributo:
javascriptelem.type = 'submit';
Se da el siguiente input:
html<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:
html<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.