Como acessar e alterar HTML com JavaScript

Published in

Jaguaribe Tech

5 min readJul 14, 2018

Eii, people!

Sabemos que o JavaScript(JS) possui maravilhas, e dentre elas, está poder alterar o HTML no próprio JS. Sim, isso é possível, através do DOM.

DOM? O que seria isso?

DOM(Document Object Model) é uma ferramenta do mundo da programação que permite acessar documentos HTML,XML e SVG. Ele é como se fosse uma árvore e suas divisões fossem métodos que permitem o acesso e a edição desses documentos através da linguagem escolhida, no nosso caso JS.

Agora que já foi explicado o que é o DOM , vamos realmente ao que interessa. Irei explicar a vocês como acessar e alterar o conteúdo do HTML através objeto document do DOM.

O exemplo de HTML ao longo do artigo será o seguinte:

Acesso ao HTML

Existem várias seletores para acessar o HTML, mas nesse artigo utilizaremos os mais conhecidos. Os que são utilizados de maneira mais geral são : querySelector() , querySelectorAll(); E os que são de uso mais específico são: getElementById(), getElementsByClassName(),getElementByTagName() . No geral os seletores irão retornar Null ou um HMTLCollection vazio ou um Nodelist vazio caso você faça uma busca e ela não for encontrada, seja por diferenças de letras ou por não existir no HTML.

Vamos começar com o querySelector(). Ele pode buscar no HTML: classe, id e tags. Ele retorna o primeiro elemento que possuir o parâmetro ou caso não for encontrado, ele retorna Null.

Vale lembrar que JS é case sensitive, ou seja, letras maiúsculas e minusculas farão diferença na hora de passar o parâmetro.

Para facilitar a utilização repetida do acesso ao HTML, podemos atribuir a uma variável o valor retornado, como segue nos exemplos abaixo.

O seu parâmetro pode ser definido de 3 formas:

(“NomeDaTag”) para buscar uma tag

(“#NomeDaId”) para buscar um ID

(“.NomeDaClass”) para buscar uma class

Já o querySelectorAll() é utilizado da mesma forma que o querySelector(), mas seu retorno é um NodeList com todos elementos que ele achou com aquele parâmetro.

Para acessarmos de forma mais especifica, temos que acessar através do índice :

Chegou a vez dos específicos, vamos comentar primeiro o getElementsById(). Ele irá fazer uma buscar pela id determinada no parâmetro e retornará a id encontrada.

O próximo da lista é o getElementsByClassName(). Essa função irá procurar as classes que possui o nome passado e retornar as classes encontradas em um HTMLCollection com o resultado da pesquisa.

O seu acesso também se dá através de índice como no NodeList.

Para finalizar as funções de acessar iremos falar do getElementByTagName(). Ela irá realizar um busca procurando pela tag definida e irá retornar um HTMLCollection com o resultado da busca.

Lembrando, que diferente do querySelector() e querySelectorAll(), o parâmetro não precisa do símbolo “#” para identificar que é uma Id, nem um “.” para retornar uma Class, pois é uma função mais específica. É importante lembrar também, que os parâmetros tem que está entre aspas.

Alteração do HTML

Para fazer alterações no HTML através do JavaScript, fazemos o uso do .innerHTML . Chamamos a variável que está atribuído o acesso ao HTML e a função recebendo o valor a ser substituído. Olhe o exemplo para entender melhor.

Percebe-se que antes do .innerHTML <p> era JavaScript, após o troca.innerHTML conteúdo foi alterado para Python3.

Além de realizar essa troca o .innerHTML pode acessar só o conteúdo da tag selecionada. Como assim? Vamos lá, observe que em todos os retornos ele traz toda a tag completa e não somente o conteúdo dela, para acessarmos somente o conteúdo dela, também podemos utilizar o .innerHTML, como no exemplo a seguir.

Bônus (Exemplo prático)

Para exemplificar de maneira prática, vamos para o seguinte exemplo:

Observe que no HTML acima criamos uma caixa de texto com um botão para receber um dado valor que será usado para gerar uma lista de Itens com a quantidade recebida.

No JavaScript abaixo recebemos o botão e o input chamando id’s e uma lista chamando uma class com o querySelector(). Depois criamos um evento que vai pegar o valor recebido do input e vai gerar várias <li>. Perceba que a alteração do HTML está sendo através do innerHTML.

Resultado:

Conclusão

A aliança entre JavaScript e a ferramenta DOM pode fazer maravilhas com seu código, é parte fundamental na interação entre HTML e JS. Exemplo disso foi o bônus do artigo, onde é mostrada essa interação que gerou dinamicidade no HTML. Ressaltando que esses foram apenas algumas funções principais dessa aliança, que vai bem além do descrito nesse artigo.

Como acessar e alterar HTML com JavaScript

Acesso ao HTML

Alteração do HTML

Bônus (Exemplo prático)

Conclusão

Referências:

Written by Karoline Lima