Please enable JavaScript.
Coggle requires JavaScript to display documents.
BREVE RESUMO DOM JAVA SCRIPT MÓDULO 1 - Coggle Diagram
BREVE RESUMO DOM JAVA SCRIPT MÓDULO 1
Com o HTML DOM, o JavaScript pode acessar e alterar todos os elementos de um documento HTML.
Com o modelo de objeto, o JavaScript obtém todo o poder de que precisa para criar HTML dinâmico:
JavaScript pode alterar todos os
elementos HTML
na página
JavaScript pode alterar todos os
atributos HTML
na página
JavaScript pode mudar todos os
estilos CSS
na página
JavaScript pode
remover elementos e atributos HTML existentes
JavaScript pode
adicionar novos elementos e atributos HTML
JavaScript pode reagir a todos os
eventos HTML existentes na página
JavaScript pode
criar novos eventos HTML
na página
Encontrando Elementos com DOM HTML
getElementById("minha-div")
Seleciona e acessa um elemento pela sua ID
document.getElementsByTagName("p")
Seleciona e acessa os elementos pela sua TAG
document.getElementsByClassName("minha-classe")
Seleciona e acessa os elementos pela sua classe
querySelector("")
Para TAG
querySelector("div")
Para ID
querySelector("#minha-div")
Para Class
querySelector(".minha-div-da-class")
A função do QuerySelector é selecionar a primeira ocorrência do valor selecionado.
querySelectorAll("")
Serve para selecionar todos os elementos de uma TAG, Classe ou ID
A mesma pode selecionar todas as classe de uma ID específica
Alterando Conteúdo
element.innerHTML
Seleciona o conteúdo de um elemento
A mesma pode ser usada para alterar o conteúdo desse elemento.
Exemplo: element.innerHTML = "Meu novo conteúdo aqui"
Alterando Style
.style
Exemplo:
Alterando Cor
style.color
Alterando Atributos
Exemplo
querySelector("img").src = "imagem2.png"
Dessa forma eu estaria alterando o atributo de img, no o arquivo da minha TAG de imagem.
Da mesma poderíamos altetrar o estilo dessa imagem através de style, como sua "width"
Criando Elementos
createElement("img")
Dessa forma estáriamos criando uma imagem em nosso corpo HTML através dos DOM.
Definindo e Excluindo Elementos Filhos
(ID-NOME).appendChild("p")
Da mesma forma poderíamos excluir esse elemento de seu "pai", usando .removeChild("nomedoelemento")
Para isso o elemento pai deve ser invocado e aplicado do .removeChild()
Exemplo:
getElementById("ID-NOME").removeChild("p")