Manipulando o DOM Parte 2 com JavaScript

Manipulando o DOM Parte 2 com JavaScript

30/06/2018 0 Por Alisson Suassuna

Olá pessoal, hoje vamos dar continuidade ao meu primeiro artigo aqui no blog, para os que ainda não leram vou está deixando o link logo abaixo desse post. Nesta parte 2 vamos focar em formulário, saber manipular o mesmo, é extremamente importante, pois 99% dos sistemas web terá um para você implementar, e conhecer todos os recursos que o JavaScript oferece para tal tarefa é de extrema importância para um bom desenvolvedor Front End, então vamos lá.

Código base


Representação do código base

Representação do código base

Agora estamos prontos para dar início aos nossos exemplos práticos, neste código HTML temos a tag <form> com dois atributos, “name” e “action”, logo depois vem a taq <input> com três atributos, “type”, “name” e “placeholder”, logo a baixo tem a tag <select> também com o atributo “name” e duas tags <option> com seus atributos value. Primeiramente vamos entender esse action, veja que colocamos uma url do google, esse caminho é um endpoint da API do buscador, isso significa que estamos usando  o mesmo para nossas buscas, e o atributo da tag input possui o  parâmetro q no “name” que também é um dos requisitos para fazemos buscas usando o google, e o select tem o hl que diz respeito a qual o idioma da pesquisa.

Nota: Galera esses parâmetros são da API de busca do google, quis trazer para esse artigo para enriquece  um pouco mais o conteúdo.

Testando o código

Testando a pesquisar

Testando a pesquisa

Agora que já entendemos o nosso código, vamos fazer as manipulações.

Primeira forma – JavaScript


Para você ver a saída desse comando, terá que abrir o inspecionar (Google Chrome, tecla de atalho F12) já no Firefox é inspecionar elementos, tecla de atalho F12.

Visualizar o código no navegador

Visualizar o código no navegador

O document.forms retorna todos os elementos <form> do nosso documento HTML, esse elemento é do tipo HTMLCollection, explico com mais detalhes esse objeto na parte 1 desse artigo, veja aqui Manipulando o DOM Parte 1 com JavaScript


Essa imagem mostrar o console.log do código acima

Essa imagem mostra o console.log do código acima

Neste exemplo podemos ser um pouco mais especifico na nossa seleção, aqui estamos capturando o <form> do índice 0, em nosso caso o primeiro <form> do documento HTML.

Segunda forma – JavaScript


Visualizar o código a cima

Visualizar o código a cima

document.pesquisa irá vasculhar todo o nosso documento e selecionar o <form> que tiver o name pesquisa, e podemos também ser um pouco mais especifico nesta busca, Conseguimos capturar somente o name do nosso <input> escrevendo a seguinte sintaxe


Visualizar o console do navegador

Visualizar o console do navegador

Podemos agora fazer alterações nos valores usando o JavaScript. Vamos atribuir um nome ao nosso formulário dinamicamente.


Estamos acessando o <form> que tem o name “pesquisa” que possui um <input> com o name “q” e todo <input> tem um value implito, atribuímos o nome Dicas de Front End – Alisson Suassuna, veja o resultado.

Atribuir valores com javascript

Atribuir valores com JavaScript

Assim como podemos alterar os valores dos inputs também podemos atribuir valores aos <select>

Avisos Importantes

Observação: Os parâmetros q e hl não são parâmetros aleatórios, foram escolhidos depois de uma pesquisa para esses exemplos, os mesmo são exigidos pela API de busca do Google. 

Galera boa noticia, vamos ter a parte 3 desse artigo, por ser um assunto muito grande, assim consigo passar com o conteúdo de forma mais detalhada e simples, espero que estejam gostando do conteúdo. Caso tenha algo a acrescentar a esse post por favor deixe um comentário.


Recebi alguns e-mails pedindo recomendações de cursos, livros etc. Então vou está fixando no blog uma área de recomendações de estudos e a cada artigo vou está deixando links de cursos, livros etc.

A recomendação de hoje é o curso de vue.js 2, ótimo curso, o professor tem uma excelente didática, onde ensina desde do básico ao avançado, e durante o curso cria um jogo de cartas bem interessante, entre outros, Vue.js é um framework que vem crescendo a cada dia, então é fundamental para um bom desenvolvedor Front End conhece-lo.

Ótimo curso de vue js

Ótimo curso de vue js

Curso de Vue.js 2

Pessoal, gostaria que vocês deixassem um comentário sobre o artigo ou  blog, sugestões de temas, críticas, seu feedback é muito importante.