Atributos de tags como propriedades em JavaScript
Vamos agora aprender a obter os atributos das tags. A seguinte regra se aplica: cada atributo de uma tag corresponde a uma propriedade homónima no elemento DOM.
Vamos ver um exemplo. Suponha que temos a seguinte tag:
html<input id="elem" type="text">
Vamos obter uma referência ao nosso elemento em uma variável:
javascriptlet elem = document.querySelector('#elem');
Vamos exibir os valores dos atributos que precisamos:
javascriptconsole.log(elem.id); // exibirá 'elem'
console.log(elem.type); // exibirá 'text'
E agora, como exemplo, vamos alterar o valor de um atributo:
javascriptelem.type = 'submit';
Dado o seguinte input:
html<input id="elem" type="email">
Há também um botão. Ao clicar no botão, exiba
na tela o conteúdo do atributo type
do input mencionado acima.
Dado o seguinte input:
html<input id="elem" type="email">
Há também um botão. Ao clicar no botão, escreva
no atributo type o valor submit.
Suponha que você tenha um link na forma da tag a,
um botão e um parágrafo. Ao clicar no botão, exiba
no parágrafo o conteúdo do atributo href do link.
Suponha que você tenha um link e um botão. Ao clicar
no botão, adicione ao final do texto do link
o conteúdo do seu atributo href entre parênteses.
Suponha que você tenha uma imagem. Coloque-a
na página usando a tag img.
Suponha que também haja um botão e um parágrafo. Faça
com que, ao clicar no botão, o caminho para a imagem do seu atributo src seja escrito no parágrafo.
Dada uma imagem na tag img e um botão.
Ao clicar no botão, escreva no atributo width
o valor 300.
Dada uma imagem na tag img e um botão.
Suponha que no atributo width esteja definida uma certa
largura. Faça um botão que, ao ser clicado,
aumente a largura da imagem em 2 vezes.
Suponha que você tenha duas imagens. Crie na
página uma tag img e dois botões. Ao
clicar no primeiro botão, escreva no atributo
src o caminho para a primeira imagem, e ao clicar
no segundo - o caminho para a segunda imagem.