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()