Manipulação de elementos HTML com Javascript

Manipulação de elementos HTML com Javascript

O Javascript é uma linguagem de programação muito utilizada no desenvolvimento de sites web, e uma de suas principais funções é a manipulação de elementos HTML. Com essa ferramenta, é possível alterar o conteúdo, estilo e comportamento de elementos na página, tornando a experiência do usuário mais dinâmica e interativa.

Selecionando elementos HTML

Antes de manipular um elemento HTML, é necessário selecioná-lo. Existem diversas formas de fazer isso, mas as mais comuns são:

• getElementById: seleciona um elemento pelo seu ID;
• getElementsByClassName: seleciona um ou mais elementos pela sua classe;
• getElementsByTagName: seleciona um ou mais elementos pelo seu nome de tag;
• querySelector: seleciona o primeiro elemento que corresponde a um seletor CSS;
• querySelectorAll: seleciona todos os elementos que correspondem a um seletor CSS.

Por exemplo, para selecionar um elemento com o ID "titulo", podemos usar o seguinte código:

var titulo = document.getElementById("titulo");

Assim, a variável "titulo" armazenará uma referência ao elemento HTML com o ID "titulo".

Alterando o conteúdo de elementos HTML

Uma das formas mais comuns de manipulação de elementos HTML é a alteração do seu conteúdo. Para isso, podemos utilizar a propriedade "innerHTML", que permite acessar e modificar o HTML interno do elemento.

Por exemplo, para alterar o texto de um elemento com o ID "mensagem", podemos usar o seguinte código:

var mensagem = document.getElementById("mensagem");
mensagem.innerHTML = "Novo texto da mensagem";

Assim, o texto dentro do elemento será substituído pelo novo valor.

Alterando o estilo de elementos HTML

Outra forma de manipulação de elementos HTML é a alteração do seu estilo. Para isso, podemos utilizar a propriedade "style", que permite acessar e modificar os estilos CSS do elemento.

Por exemplo, para alterar a cor de fundo de um elemento com o ID "caixa", podemos usar o seguinte código:

var caixa = document.getElementById("caixa");
caixa.style.backgroundColor = "red";

Assim, a cor de fundo da caixa será alterada para vermelho.

Adicionando e removendo classes de elementos HTML

Uma forma mais avançada de manipulação de elementos HTML é a adição e remoção de classes. As classes são utilizadas em CSS para aplicar estilos a um ou mais elementos, e podem ser adicionadas ou removidas dinamicamente com Javascript.

Para adicionar uma classe a um elemento com o ID "botao", podemos usar o seguinte código:

var botao = document.getElementById("botao");
botao.classList.add("ativo");

Assim, a classe "ativo" será adicionada ao elemento, permitindo que seja estilizado com CSS.

Para remover uma classe de um elemento com o ID "botao", podemos usar o seguinte código:

var botao = document.getElementById("botao");
botao.classList.remove("ativo");

Assim, a classe "ativo" será removida do elemento.

Conclusão

A manipulação de elementos HTML com Javascript é uma das principais técnicas utilizadas no desenvolvimento de sites web. Com ela, é possível criar páginas mais dinâmicas e interativas, melhorando a experiência do usuário. As principais formas de manipulação são a seleção de elementos, a alteração do conteúdo e estilo, e a adição e remoção de classes. Com essas ferramentas, é possível criar sites mais modernos e eficientes.

Próxima página do Ebook Gratuito:

13Interação com APIs em Javascript

3 minutos