Please enable JavaScript.
Coggle requires JavaScript to display documents.
Manipulando Elementos do DOM - Coggle Diagram
Manipulando Elementos do DOM
manipulação de elementos
getElementById
acesso apenas aos elementos que foi atribuído a um id
são apenas dois dos muitos métodos para trabalhar com o Modelo de Objeto de Documento, o DOM
getElementsByTagName
bom para mudanças de vários elementos ao mesmo tempo, mas é um pouco complicado para um bom trabalho mais detalhado
DOM
é um organograma, criado automaticamente pelo navegador quando sua página web é carregada
Todos os elementos do seu site - as tags, os blocos de texto, as imagens, os links, as tabelas, o estilo, atributos e muito mais—estão neste organograma
seu código JavaScript pode pegar qualquer elemento do seu site. Além disso, o JavaScript pode adicionar, mover ou excluir elementos. Se você quisesse, você poderia quase criar um site do zero usando os métodos DOM do JavaScript.
Conhecendo os elementos do DOM
Os três níveis superiores do DOM são sempre os mesmos para uma página web padrão
O documento é o primeiro nível. Abaixo do document está o segundo nível, o html. E abaixo do html está o terceiro nível que é composto pela head e body. Abaixo de cada um deles há mais níveis.
Encontrando Elementos
o Document Object Model (DOM) é uma hierarquia de pais e filhos.
Tudo no site, excluindo o próprio document, é filho de algo.
Podemos “pegar” qualquer elemento do nosso site e manipular. Abaixo, um exemplo de como podemos pegar um elemento pelo id.
var email = document.getElementById(“email”);
Você também aprendeu como fazer uma coleção de array de todos os elementos de um determinado tipo dentro do documento:
var elementoP = document.getElementsByTagName(“p”);
você pode separar qualquer parágrafo dentro do array para que você possa, por exemplo, pegar seu conteúdo.
var conteudo = elementoP[2].innerHTML;
se quisermos restringir a pegar o segundo elemento de uma lista; poderíamos fazer assim:
1 more item...
outras maneiras de usar a hierarquia
em vez de escrever childNodes[0], você pode escrever firstChild. E em vez de escrever, por exemplo, childNodes[9], para segmentar o 10ª filho em uma coleção de 10 filhos, você pode escrever lastChild.
Fazer isso: var targetNode = parentNode.chilNodes[0];
É a mesma coisa que fazer: var targetNode = parentNode.forstChild;
se houver 3 nós filhos
var targetNode = parentNode.chilNodes[2];
É a mesma coisa que fazer isso: var targetNode = parentNode.lastChild;
