Capítulo 5Javascript Manipulando o DOM

Criado por: Malcon Toledo

Aulas em Vídeo


Down arrow

Parte 1/1

Manipulando elementos HTML

Métodos:

querySelector()

Conhecendo o DOM

o DOM fornece uma representação estruturada do documento HTML como uma árvore.

o JavaScript "conversa" com o HTML por meio do DOM

para exibir o DOM no console:

console.log(document)

Método querySelector()

querySelector()

Retorna o primeiro elemento dentro do documento que corresponde ao grupo especificado de seletores.

HTML

  

Título da página

este é o primeiro parágrafo

este é o segundo parágrafo

JS

  var a = document.querySelector('p')
  console.log(a)
RESULTADO

Propriedade textContent

textContent

Define ou retorna o conteúdo de texto do nó especificado e todos os seus descendentes

HTML

  

Título da página

este é o primeiro parágrafo

este é o segundo parágrafo

JS

  var a = document.querySelector('.div1')
  var conteudo = a.textContent
  console.log(a)
  console.log(conteudo)
RESULTADO
Exemplo prático 1
HTML

Lista de clientes

codigo Nome cidade
4545 Fulano Curitiba
3232 Beltrano Minas Gerais
JS

var codCli = prompt("digite o cógido do cliente")
codCli = "cliente-" + codCli

var cliente = document.querySelector(`#${codCli}`)
var cliNome = cliente.querySelector(".cli-nome").textContent
console.log('o nome do cliente é: ' + cliNome)
RESULTADO

Pede ao usuário um código de cliente. Exibe no console o nome do cliente

método querySelectorAll()

querySelectorAll()

retorna todos os elementos no documento que correspondem a um seletor (es) CSS especificado

HTML

Lista de clientes

codigo Nome cidade
4545 Fulano Curitiba
3232 Beltrano Minas Gerais
JS

var clientes = document.querySelectorAll(`#cliente`)
for (var i = 0; i < clientes.length; i++) {
  let cli = clientes[i].querySelector(".cli-nome").textContent
  console.log(cli)
}
RESULTADO

Lista no console todos os nomes de clientes da tabela

Manipulando elementos HTML

Métodos:

querySelector()

Conhecendo o DOM

o DOM fornece uma representação estruturada do documento HTML como uma árvore.

o JavaScript "conversa" com o HTML por meio do DOM

Método querySelector()