Untitled

Machine Translated by Google
Este trabalho está licenciado sob Creative Commons Attribution-NonCommercial-ShareAlike 4.0
Licença Internacional.
ISBN 978-0-9997730-9-3
Entendendo o DOM — Documento

Modelo de objeto
Tânia Rascia
DigitalOcean, Nova York, Nova York, EUA
2020-10
Entendendo o DOM — Documento

Modelo de objeto
1. Sobre a DigitalOcean
2. Introdução
3. Introdução ao DOM
4. Compreendendo a árvore e os nós DOM

5. Como acessar elementos no DOM
6. Como percorrer o DOM
7. Como fazer alterações no DOM 8. Como
modificar atributos, classes e estilos no DOM 9. Compreendendo eventos em
JavaScript
Sobre a DigitalOcean
A DigitalOcean é uma plataforma de serviços em nuvem que oferece a simplicidade
os desenvolvedores adoram e as empresas confiam para executar aplicativos de produção em
escala. Ele fornece computação altamente disponível, segura e escalável, armazenamento
e soluções de rede que ajudam os desenvolvedores a criar um ótimo software com mais rapidez.
Fundada em 2012 com escritórios em Nova York e Cambridge, MA,
A DigitalOcean oferece preços transparentes e acessíveis, um usuário elegante
interface e uma das maiores bibliotecas de recursos de código aberto
acessível. Para mais em formação, por favor Visita
https://www.digitalocean.com ou siga @digitalocean no Twitter.

Introdução
Sobre este livro

JavaScript é a linguagem de programação de fato da web, mas a linguagem em si
não inclui nenhum método integrado para trabalhar com entrada/saída (E/S), como
exibição de gráficos e som. Em vez disso, o navegador da Web fornece uma API
para acessar o documento HTML em uma estrutura de árvore conhecida como
Document Object Model (DOM). A combinação de JavaScript e DOM é o que nos
permite criar sites interativos e dinâmicos.
Muitas estruturas modernas, como React, Vue e Svelte abstraem muito do DOM
do desenvolvedor, mas as estruturas também usam o DOM sob o capô. A biblioteca
JavaScript jQuery também foi criada para facilitar o trabalho com o DOM, mas a
prática de desenvolvimento moderna é trabalhar diretamente com o DOM. Para ser
um desenvolvedor web proficiente, é essencial ter uma compreensão profunda do
que é o DOM e como trabalhar com ele. O objetivo deste livro é fornecer uma
compreensão básica do DOM, bem como explorar exemplos dos métodos mais
comuns e úteis para interagir com o DOM.
Este livro é baseado no livro Compreendendo o DOM série de tutoriais encontrada

na Comunidade DigitalOcean. Os tópicos que ele cobre incluem:
O DOM e a estrutura da árvore DOM
Como acessar, percorrer e modificar nós e elementos no DOM

Como modificar atributos, classes e estilos no DOM
Use eventos para criar sites interativos e dinâmicos
Cada capítulo é independente e pode ser seguido independentemente dos outros.
No entanto, se você ainda não está familiarizado com o conceito de DOM e da árvore
DOM, é recomendável ler os capítulos introdutórios

primeiro.
Se você quiser aprender mais sobre JavaScript, visite a seção JavaScript da
Comunidade DigitalOcean . Você pode acompanhar a série How to Code in JavaScript
para uma experiência de aprendizado direcionado.

Introdução ao DOM
Escrito por Tânia Rascia
O Document Object Model, geralmente chamado de DOM, é um
essencial para tornar os sites interativos. É uma interface que permite
uma linguagem de programação para manipular o conteúdo, estrutura e estilo de
Um website. JavaScript é a linguagem de script do lado do cliente que se conecta a

o DOM em um navegador de internet.
Quase sempre que um site realiza uma ação, como alternar entre
uma apresentação de slides de imagens, exibindo um erro quando um usuário tenta enviar
um formulário incompleto ou alternando um menu de navegação, é o resultado de
JavaScript acessando e manipulando o DOM. Neste artigo, vamos
aprenda o que é o DOM, como trabalhar com o objeto de documento e o

diferença entre o código-fonte HTML e o DOM.
Observação: embora o DOM seja independente de linguagem ou criado para ser
independente de uma linguagem de programação particular, ao longo deste
recurso no qual focaremos e nos referiremos à implementação do JavaScript do

DOM HTML.
Pré-requisitos
Para entender efetivamente o DOM e como ele se relaciona com o trabalho com a web, é
necessário ter um conhecimento prévio de HTML e CSS. Também é benéfico ter
familiaridade com a sintaxe fundamental do JavaScript e a estrutura do código.
O que é o DOM?
No nível mais básico, um site consiste em um documento HTML. o

O navegador que você usa para visualizar o site é um programa que interpreta
HTML e CSS e processa o estilo, o conteúdo e a estrutura da página que você
vê.
Além de analisar o estilo e a estrutura do HTML e do CSS, o navegador cria
uma representação do documento conhecida como Document Object Model.
Este modelo permite que o JavaScript acesse o conteúdo de texto e os
elementos do documento do site como objetos.
JavaScript é uma linguagem interativa e é mais fácil entender novos conceitos
fazendo. Vamos criar um site bem básico. Crie um arquivo index.html e salve-o
em um novo diretório de projeto.
index.html
<!DOCTYPE html>
<html lang="en">
<cabeça>
<title>Aprendendo o DOM</title> </head>
<corpo>
<h1>Modelo de objeto de documento </h1> </
body>
</html>
Esse código é a fonte HTML familiar de um novo esqueleto de site. Isto
contém os aspectos mais essenciais de um documento do site - um doctype e uma tag html
com o cabeçalho e o corpo aninhados dentro.
Para nossos propósitos, usaremos o navegador Chrome, mas você pode receber uma
saída semelhante de outro navegador moderno. No Chrome, abra index.html. Você verá
um site simples com nosso cabeçalho dizendo “Document Object Model”. Clique com o
botão direito do mouse em qualquer lugar da página e selecione "Inspecionar". Isso abrirá
as Ferramentas do desenvolvedor.
Na guia Elementos, você verá o DOM.
Exemplo de DOM
Nesse caso, quando expandido, parece exatamente igual ao código-fonte HTML que
acabamos de escrever — um doctype e algumas outras tags HTML que

nós adicionamos. Passar o mouse sobre cada elemento destacará o respectivo

elemento no site renderizado. Pequenas setas à esquerda do HTML
Os elementos permitem que você alterne a exibição de elementos aninhados.
O objeto do documento
O objeto de documento é um objeto interno que possui muitas propriedades e métodos
que podemos usar para acessar e modificar sites. Para entender como trabalhar com o
DOM, você deve entender como os objetos funcionam em JavaScript. Revisar Entendendo
Objetos em JavaScript se você não se sentir confortável com o conceito de objetos.
Em Developer Tools em index.html, vá para a guia Console. Digite documento no
console e pressione ENTER. Você verá que a saída é a mesma que você vê na guia
Elementos.
documento;
Saída
#documento
<!DOCTYPE html>
<html lang="en">
<cabeça>
<title>Aprendendo o DOM</title> </head>
<corpo>
body>
</html>
Digitar documento e trabalhar diretamente no console não é

algo que você geralmente fará fora da depuração, mas ajuda
solidificar exatamente o que é o objeto do documento e como modificá-lo, como
vai descobrir abaixo.
Qual é a diferença entre o DOM e o HTML

Código fonte?
Atualmente, com este exemplo, parece que o código-fonte HTML e o DOM são
exatamente a mesma coisa. Há duas instâncias em que o DOM gerado pelo
navegador será diferente do código-fonte HTML:
O DOM é modificado pelo JavaScript do lado do cliente
O navegador corrige automaticamente erros no código-fonte
Vamos demonstrar como o DOM pode ser modificado pelo lado do cliente
JavaScript. Digite o seguinte no console:
documento.corpo;
O console responderá com esta saída:
Saída
<corpo>
body>
document é um objeto, body é uma propriedade desse objeto que acessamos

com a notação de ponto. O envio de document.body para o console gera o elemento
body e tudo dentro dele.
No console, podemos alterar algumas das propriedades ao vivo do objeto body
neste site. Vamos editar o atributo style, alterando a cor de fundo para fúcsia. Digite
isso no console:
document.body.style.backgroundColor = 'fúcsia';
Depois de digitar e enviar o código acima, você verá a atualização ao vivo do
site, à medida que a cor do plano de fundo muda.
Modificação em tempo real do DOM
Alternando para a guia Elementos ou digitando document.body no

console novamente, você verá que o DOM mudou.
Saída
<body style="background-color: fúcsia;">

body>
Nota: Para alterar a propriedade CSS background-color, nós

tive que digitar backgroundColor no JavaScript. Qualquer CSS hifenizado
propriedade será escrita em camelCase em JavaScript.
O código JavaScript que digitamos, atribuindo fúcsia ao fundo

cor do corpo, agora faz parte do DOM.
No entanto, clique com o botão direito do mouse na página e selecione "Exibir
fonte da página". Você notará que a fonte do site não contém o novo atributo de
estilo que adicionamos via JavaScript. A fonte de um site não mudará e nunca
será afetada pelo JavaScript do lado do cliente. Se você atualizar a página, o
novo código que adicionamos no console desaparecerá.
A outra instância na qual o DOM pode ter uma saída diferente da
Código-fonte HTML é quando há erros no código-fonte. 1
Um exemplo comum disso é a tag table — uma tag tbody é necessária dentro
de uma tabela, mas os desenvolvedores muitas vezes falham em incluí-la em
seu HTML. O navegador corrigirá automaticamente o erro e adicionará o tbody,
modificando o DOM. O DOM também corrigirá tags que não foram
fechado.
Conclusão
Neste tutorial, definimos o DOM, acessamos o objeto de documento, usamos
JavaScript e o console para atualizar uma propriedade do objeto de documento
e examinamos a diferença entre o código-fonte HTML e o
DOM.
Para obter informações mais detalhadas sobre o DOM, revise o Documento

Página Object Model (DOM) na Mozilla Developer Network.
No próximo tutorial, revisaremos a terminologia HTML importante,
aprenderemos sobre a árvore DOM, descobriremos o que são nós, aprenderemos sobre os
tipos comuns de nós e comece a criar scripts interativos com JavaScript.
Compreendendo a árvore e os nós DOM

O DOM é muitas vezes referido como a árvore DOM e consiste em uma árvore de
objetos chamados nós. Na Introdução ao DOM, nós revisamos o que
o Document Object Model (DOM) é, como acessar o documento
objeto e modifique suas propriedades com o console, e a diferença

entre o código-fonte HTML e o DOM.
Neste tutorial, revisaremos a terminologia HTML, que é essencial para
trabalhando com JavaScript e o DOM, e aprenderemos sobre o DOM
árvore, quais são os nós e como identificar os tipos de nós mais comuns.
Por fim, iremos além do console e criaremos um programa JavaScript
para modificar interativamente o DOM.
Terminologia HTML
Entender a terminologia HTML e JavaScript é essencial para entender como trabalhar
com o DOM. Vamos rever brevemente alguma terminologia HTML.
Para começar, vamos dar uma olhada neste elemento HTML.
<a href="index.html">Página inicial</a>
Aqui temos um elemento âncora, que é um link para index.html.
a é a etiqueta
href é o atributo
index.html é o valor do atributo

A casa é o texto.
Tudo entre a tag de abertura e fechamento combinados fazem o

elemento HTML inteiro.
Estaremos trabalhando com o index.html do tutorial anterior:
index.html
<!DOCTYPE html>
<html lang="en">
<cabeça>
<title>Aprendendo o DOM</title>
</head>
<corpo>
<h1>Modelo de objeto de documento </h1>
</body>
</html>
A maneira mais simples de acessar um elemento com JavaScript é pelo id

atributo. Vamos adicionar o link que temos acima em nosso arquivo index.html
com um id de nav.
index.html
...
<corpo>
<^><a id="nav" href="index.html">Página inicial</a><^>
</body>
...
Carregue ou recarregue a página na janela do navegador e verifique o

DOM para garantir que o código foi atualizado.
Vamos usar o método getElementById() para acessar o
elemento inteiro. No console, digite o seguinte:
document.getElementById('nav');
Saída
<a id="nav" href="index.html">Página inicial</a>
Recuperamos o elemento inteiro usando getElementById().

Agora, em vez de digitar esse objeto e método toda vez que quisermos
acesse o link de navegação, podemos colocar o elemento em uma variável para trabalhar
isso com mais facilidade.
let navLink = document.getElementById('nav');

A variável navLink contém nosso elemento âncora. A partir daqui, podemos
facilmente modificar atributos e valores. Por exemplo, podemos mudar onde o
link vai alterando o atributo href:

navLink.href = 'https://www.wikipedia.org';
Também podemos alterar o conteúdo do texto reatribuindo o textContent
propriedade:
navLink.textContent = 'Navegar para a Wikipédia';

Agora, quando visualizamos nosso elemento, seja no console ou verificando o
Elementos, podemos ver como o elemento foi atualizado.
navLink;
Saída
< aid="nav"
href="https://www.wikipedia.org/">Navegue até
Wikipédia</a>
Isso também se reflete no front-end do site.

Link atualizado via DOM
Atualizar a página reverterá tudo de volta aos seus valores originais.
Neste ponto, você deve entender como usar um método de documento para
acessar um elemento, como atribuir um elemento a uma variável e como
modificar propriedades e valores no elemento.
A árvore DOM e nós

Todos os itens no DOM são definidos como nós. Existem muitos tipos de nós, mas
existem três principais com os quais trabalhamos com mais frequência:
nós de elemento
nós de texto
Nós de comentário
Quando um elemento HTML é um item no DOM, ele é chamado de
nó de elemento. Qualquer texto isolado fora de um elemento é um nó de texto e um
comentário HTML é um nó de comentário. Além desses três tipos de nó, o próprio
documento é um nó de documento, que é a raiz de todos os outros

nós.
O DOM consiste em uma estrutura de árvore de nós aninhados, que geralmente é
chamada de árvore DOM. Você pode estar familiarizado com uma árvore genealógica
ancestral, que consiste em pais, filhos e irmãos. Os nós no DOM também são referidos
como pais, filhos e irmãos, dependendo

sua relação com outros nós.
Para demonstrar, crie um arquivo nodes.html. Adicionaremos texto, comentário,

e nós de elementos.
nós.html
<!DOCTYPE html>
<html>
<cabeça>
<title>Aprendendo sobre nós</title>

</head>
<corpo>
<h1>Um nó de elemento </h1>

Um nó de texto.
</body>
</html>
O nó do elemento html é o nó pai. cabeça e corpo são irmãos, filhos de html.

body contém três nós filhos, que são todos irmãos — o tipo de nó não altera o
nível em que está aninhado.
Observação: ao trabalhar com um DOM gerado por HTML, o recuo do código-fonte HTML criará
muitos nós de texto vazios, que não serão visíveis na guia Elementos do DevTools. Leia sobre
espaço em branco no
DOM
Identificando o tipo de nó
Cada nó em um documento possui um tipo de nó, que é acessado por meio da

propriedade nodeType. A Mozilla Developer Network tem uma lista atualizada de
todas as constantes de tipo de nó. Abaixo está um gráfico dos tipos de nós mais
comuns com os quais estamos trabalhando neste tutorial.
NTV E
ELEMENT_NODE 1 O elemento <body>
TEXT_NODE 3 Texto que não faz parte de um elemento
COMMENT_NODE 8 
Na guia Elementos das Ferramentas do Desenvolvedor, você pode notar que
sempre que você clicar e destacar qualquer linha no DOM, o valor de == $0 aparecerá
próximo a ela. Esta é uma maneira muito prática de acessar o elemento atualmente
ativo nas Ferramentas do Desenvolvedor digitando $0.

No console de nodes.html, clique no primeiro elemento do corpo,
que é um elemento h1.
Tipo de nó DOM
No console, obtenha o tipo de nó do nó atualmente selecionado com o

propriedade nodeType.
$0.nodeType;
Saída
1
Com o elemento h1 selecionado, você veria 1 como a saída, que

pode ver correlatos a ELEMENT_NODE. Faça o mesmo para o texto e o
comentário, e eles produzirão 3 e 8, respectivamente.
Quando você sabe como acessar um elemento, pode ver o tipo de nó
sem destacar o elemento no DOM.
document.body.nodeType;
Saída
1
Além de nodeType, você também pode usar a propriedade nodeValue para obter o
valor de um nó de texto ou comentário e nodeName para obter a tag

nome de um elemento.
Modificando o DOM com Eventos
Até agora só vimos como modificar o DOM no console,
que vimos é temporário; toda vez que a página é atualizada, o
alterações são perdidas. Na introdução ao DOM tutorial, usamos o
console para atualizar a cor de fundo do corpo. Podemos combinar o que
aprendemos ao longo deste tutorial a criar um botão interativo que

faz isso quando clicado.
Vamos voltar ao nosso arquivo index.html e adicionar um elemento de botão com

um id. Também adicionaremos um link para um novo arquivo em um novo diretório js
js/scripts.js.
index.html
<!DOCTYPE html>
<html lang="en">
<cabeça>
</head>
<corpo>
<button id="changeBackground">Alterar
Cor de fundo </button>
<script src="scripts.js"></script> </body>
</html>
Um evento em JavaScript é uma ação que o usuário realizou. Quando o

usuário passa o mouse sobre um elemento, ou clica em um elemento, ou
pressiona uma tecla específica no teclado, todos esses são tipos de eventos.
Neste caso específico, queremos que nosso botão ouça e esteja pronto para
executar uma ação quando o usuário clicar nele. Podemos fazer isso adicionando um evento
ouvinte do nosso botão.
Crie scripts.js e salve-o no novo diretório js. Dentro do
arquivo, primeiro encontraremos o elemento de botão e o atribuiremos a uma variável.
js/scripts.js
deixar botão =
document.getElementById('changeBackground');
Usando o método addEventListener(), vamos dizer ao botão para

ouça um clique e execute uma função uma vez clicado.
js/scripts.js
...
button.addEventListener('click', () => {
// ação irá aqui

});
Por fim, dentro da função, escreveremos o mesmo código do
tutorial anterior para alterar a cor de fundo para fúcsia.
js/scripts.js
...
Aqui está todo o nosso script:
js/scripts.js
deixar botão =
document.getElementById('changeBackground');
});
Depois de salvar este arquivo, atualize index.html no navegador. Clique no

e o evento será acionado.
Modificar plano de fundo com eventos
A cor de fundo da página mudou para fúcsia devido ao

Evento JavaScript.
Conclusão
Neste tutorial, revisamos a terminologia que nos permitirá entender e modificar o
DOM. Aprendemos como o DOM é estruturado como uma árvore de nós que
normalmente serão elementos HTML, texto ou comentários, e criamos um script
que permitiria ao usuário modificar um site sem precisar digitar manualmente o
código no console do desenvolvedor.
Como acessar elementos no DOM
Em Noções básicas sobre a árvore e os nós DOM, nós examinamos como o
DOM é estruturado como uma árvore de objetos chamados nós, e esses nós podem ser
texto, comentários ou elementos. Normalmente, quando acessamos o conteúdo no DOM,
será por meio de um nó de elemento HTML.
Para ser proficiente em acessar elementos no DOM, é
necessário ter um conhecimento prático de seletores CSS, sintaxe e
terminologia, bem como uma compreensão dos elementos HTML. Nisso
tutorial, veremos várias maneiras de acessar elementos no DOM: por
Seletores de ID, classe, tag e consulta.
Visão geral
Aqui está uma visão geral da tabela dos cinco métodos que abordaremos neste tutorial.
G S S M
EU IRIA #demo getElementById()
Classe .demonstração getElementsByClassName()
Marcação
demonstração getElementsByTagName()
Seletor (único) querySelector()
Seletor (todos) querySelectorAll()

É importante ao estudar o DOM digitar os exemplos em seu próprio computador
para garantir que você está entendendo e retendo as informações que aprendeu.
Você pode salvar este arquivo HTML, access.html, em seu próprio projeto para
trabalhar com os exemplos junto com este artigo. Se você não tiver certeza de como
trabalhar com JavaScript e HTML localmente, revise nosso tutorial Como adicionar
JavaScript a HTML .
access.html
<!DOCTYPE html>
<html lang="en">
<cabeça>
<meta charset="utf-8">
<meta name="porta de visualização" content="largura=dispositivo

largura, escala inicial = 1,0">
<title>Acessando elementos no DOM</title>
<estilo>
html { font-family: sans-serif; cor: #333; }
corpo { largura máxima: 500px; margem: 0 automático;
preenchimento: 0 15px; }
div, artigo { preenchimento: 10px; margem: 5px;
borda: 1px sólido #dedede; }
</estilo>
</head>
<corpo>
<h1>Acessando elementos no DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Acesse -me pelo ID</div>

<h2>Aula (.demo)</h2>
<div class="demo">Acesse -me pela aula (1)</div>
<div class="demo">Acesse -me pela turma (2)</div>
<h2>Tag (artigo)</h2>
<article>Acesse -me pela tag (1)</article> <article>Acesse
-me pela tag (2)</article>
<h2>Seletor de consultas</h2>
<div id="demo-query">Acesse -me por consulta</div>
<h2>Seletor de consulta tudo</h2>

<div class="demo-query-all">Acesse -me por consulta
todos (1)</div>
todos (2)</div>
</body>
</html>
Neste arquivo HTML, temos muitos elementos que acessaremos com

diferentes métodos de documento. Quando renderizamos o arquivo em um navegador, ele
ficará parecido com isto:
Renderização do navegador da página access.html
Usaremos os diferentes métodos descritos na Visão geral

acima para acessar os elementos disponíveis no arquivo.
Acessando Elementos por ID
A maneira mais fácil de acessar um único elemento no DOM é por meio de seu ID exclusivo.
Podemos pegar um elemento por ID com getElementById() método do objeto de documento.
document.getElementById();
Para ser acessado por ID, o elemento HTML deve ter um id

atributo. Temos um elemento div com ID demo.
No Console, vamos pegar o elemento e atribuí-lo ao demoId

variável.
const demoId = document.getElementById('demo');

Registrar demoId no console retornará todo o nosso elemento HTML.
console.log(demoId);
Saída
<div id="demo">Acesse-me pelo ID</div>
Podemos ter certeza de que estamos acessando o elemento correto alterando o

propriedade de fronteira para roxo.
demoId.style.border = '1px sólido roxo';
Depois de fazer isso, nossa página ao vivo ficará assim:
Renderização do navegador do estilo do elemento de ID
Acessar um elemento por ID é uma maneira eficaz de obter um elemento

rapidamente no DOM. No entanto, tem desvantagens; um ID sempre deve ser
exclusivo para a página e, portanto, você só poderá acessar um único elemento
por vez com o método getElementById(). Se você quisesse adicionar uma função
a muitos elementos em toda a página, seu código rapidamente se tornaria
repetitivo.
Acessando Elementos por Classe
a classe atributo é usado para acessar um ou mais elementos específicos no

DOM. Podemos obter todos os elementos com um determinado nome de classe
com getElementsByClassName() método.
document.getElementsByClassName();
Agora queremos acessar mais de um elemento, e em nosso exemplo

tem dois elementos com uma classe de demonstração.
<div class="demo">Acessar -me pela turma (1)</div> <div

class="demo">Acessar -me pela turma (2)</div>
Vamos acessar nossos elementos no Console e colocá-los em uma variável

chamado demoClass.
const classedemo =
document.getElementsByClassName('demo');
Neste ponto, você pode pensar que pode modificar os elementos da mesma
forma que fez com o exemplo de ID. No entanto, se tentarmos executar o seguinte
código e alterar a propriedade border dos elementos da classe demo para laranja,
obteremos um erro.
demoClass.style.border = '1px sólido laranja';
Saída
TypeError não detectado: não é possível definir a propriedade 'border'
de indefinido
A razão pela qual isso não funciona é porque, em vez de apenas obter um
elemento, temos um objeto semelhante a uma matriz de elementos.
console.log(demoClass);
Saída
(2) [div.demo, div.demo]
Matrizes JavaScript deve ser acessado com um número de índice. Pudermos

portanto, altere o primeiro elemento dessa matriz usando um índice de 0.
demoClass[0].style.border = '1px sólido laranja';
Geralmente, ao acessar elementos por classe, queremos aplicar uma alteração
a todos os elementos do documento com essa classe específica, não apenas a um.
Podemos fazer isso criando um loop for e percorrendo cada item do array.
for (i = 0; i < demoClass.length; i++) {

demoClass[i].style.border = '1px sólido laranja';
}
Quando executamos este código, nossa página ao vivo será renderizada assim:
Renderização do navegador do estilo do elemento de classe

Agora selecionamos todos os elementos da página que possuem uma classe de demonstração,
e mudei a propriedade da borda para laranja.
Acessando Elementos por Tag
Uma maneira menos específica de acessar vários elementos na página seria pelo nome
da tag HTML. Acessamos um elemento por tag com o método getElementsByTagName()
método.
document.getElementsByTagName();
Para nosso exemplo de tag, estamos usando elementos de
artigo. <article>Acesse-me por tag (1)</article>
<article>Acesse-me por tag (2)</article>

Apenas Curti acessando um element por Está classe,
getElementsByTagName() retornará um objeto semelhante a uma matriz de elementos, e
podemos modificar cada tag no documento com um loop for.
const demoTag =
document.getElementsByTagName('artigo');
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px azul sólido';
Ao executar o código, a página ao vivo será modificada da seguinte forma:

Renderização do navegador do estilo do elemento de tag
O loop alterou a propriedade de borda de todos os elementos do artigo para

azul.
Seletores de consulta
Se você tem alguma experiência com o jQuery API, você pode estar familiarizado com
método do jQuery de acessar o DOM com seletores CSS.
$('#demo'); // retorna o elemento de ID de demonstração em
jQuery
Podemos fazer o mesmo em JavaScript simples com os métodos querySelector()

e querySelectorAll().
document.querySelector();
document.querySelectorAll();
Para acessar um único elemento, usaremos o querySelector()

método. Em nosso arquivo HTML, temos um elemento de consulta de demonstração
O seletor para um atributo id é o símbolo de cerquilha (#). podemos atribuir

o elemento com o id de consulta demo para a variável demoQuery.
const demoQuery = document.querySelector('#demo
consulta');
No caso de um seletor com vários elementos, como uma classe ou tag,
querySelector() retornará o primeiro elemento correspondente à consulta.
Podemos usar o querySelectorAll() método para coletar todos os elementos que
correspondem a uma consulta específica.
Em nosso arquivo de exemplo, temos dois elementos com o demo-query-all
classe aplicada a eles.
<div class="demo-query-all">Acesse -me consultando todos

(1)</div>
<div class="demo-query-all">Acesse -me consultando todos

(2)</div>
O seletor para um atributo de classe é um ponto ou ponto final (.), para que possamos
acesse a classe com .demo-query-all.

const demoQueryAll =
document.querySelectorAll('.demo-query-all');
Usando o método forEach(), podemos aplicar a cor verde ao
propriedade border de todos os elementos correspondentes.
demoQueryAll.forEach(consulta => {
query.style.border = '1px verde sólido';

});
Renderização do navegador do estilo querySelector()
Com querySelector(), os valores separados por vírgula funcionam como um
operador OR. Por exemplo, querySelector('div, article') corresponderá a div ou article,
o que aparecer primeiro no documento. Com querySelectorAll(), os valores separados
por vírgula funcionam como um AND

operator e querySelectorAll('div, article') corresponderão

todos os valores div e article no documento.
Usar os métodos do seletor de consulta é extremamente poderoso, pois você pode
acessar qualquer elemento ou grupo de elementos no DOM da mesma forma que faria
em um arquivo CSS. Para obter uma lista completa de seletores, revise Seletores CSS
na Mozilla Developer Network.
Código JavaScript completo

Abaixo está o roteiro completo do trabalho que fizemos acima. Você pode usá-lo para
acessar todos os elementos em nossa página de exemplo. Salve o arquivo como
access.js e carregue-o no arquivo HTML logo antes da tag body de fechamento.

access.js
// Atribui todos os elementos

const demoId = document.getElementById('demo');
const classedemo =
document.getElementsByClassName('demo');
const demoTag =
document.getElementsByTagName('artigo');
const demoQuery = document.querySelector('#demo
consulta');
const demoQueryAll =
document.querySelectorAll('.demo-query-all');
// Muda a borda do ID demo para roxo

demoId.style.border = '1px sólido roxo';
// Muda a borda da classe demo para laranja

for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px sólido laranja';
}
// Muda a borda da tag demo para azul

for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px azul sólido';
}
// Muda a borda da consulta de demonstração do ID para vermelho
demoQuery.style.border = '1px vermelho sólido';

// Muda a borda da classe query-all para verde
demoQueryAll.forEach(consulta => {
query.style.border = '1px verde sólido';

});
Seu arquivo HTML final ficará assim:

access.html
<!DOCTYPE html>
<html lang="en">
<cabeça>
<meta charset="utf-8">
<meta name="porta de visualização" content="largura=dispositivo

largura, escala inicial = 1,0">
<title>Acessando elementos no DOM</title>
<estilo>
html { font-family: sans-serif; cor: #333; }
corpo { largura máxima: 500px; margem: 0 automático;
preenchimento: 0 15px; }
div, artigo { preenchimento: 10px; margem: 5px;
borda: 1px sólido #dedede; }
</estilo>
</head>
<corpo>
<h1>Acessando elementos no DOM</h1>
<h2>ID (#demo)</h2>

<h2>Aula (.demo)</h2>
<div class="demo">Acesse -me pela aula (1)</div>
<div class="demo">Acesse -me pela turma (2)</div>
<h2>Tag (artigo)</h2>
<article>Acesse -me pela tag (1)</article> <article>Acesse
-me pela tag (2)</article>
<h2>Seletor de consultas</h2>
<h2>Seletor de consulta tudo</h2>

todos (1)</div>
todos (2)</div>
<script src="access.js"></script>
</body>
</html>
Você pode continuar trabalhando nesses arquivos de modelo para fazer

alterações adicionais acessando elementos HTML.
Conclusão
Neste tutorial, examinamos 5 maneiras de acessar elementos HTML no
DOM — por ID, por classe, por nome de tag HTML e por seletor. O método
você usará para obter um elemento ou grupo de elementos dependerá
suporte do navegador e quantos elementos você estará manipulando. Vocês
agora deve se sentir confiante para acessar qualquer elemento HTML em um documento
com JavaScript através do DOM.

Como percorrer o DOM

O tutorial anterior desta série, Como acessar elementos no
DOM, aborda como usar os métodos integrados do objeto de documento para
acesse elementos HTML por ID, classe, nome de tag e seletores de consulta. Nós
saiba que o DOM é estruturado como uma árvore de nós com o documento
nó na raiz e todos os outros nós (incluindo elementos, comentários e

nós de texto) como os vários ramos.
Freqüentemente, você desejará percorrer o DOM sem especificar cada
e todos os elementos de antemão. Aprender a navegar para cima e para baixo no
árvore DOM e passar de galho em galho é essencial para entender
como trabalhar com JavaScript e HTML.
Neste tutorial, veremos como percorrer o DOM (também conhecido como
andando ou navegando no DOM) com propriedades pai, filho e irmão.
Configurar
Para começar, criaremos um novo arquivo chamado nodes.html composto pelo

seguinte código.
nós.html
<!DOCTYPE html>
<html>
<cabeça>
<title>Aprendendo sobre nós</title>
<estilo>
* { border: 2px solid #dedede; preenchimento: 15px;
margem: 15px; }
html { margem: 0; preenchimento: 0; }
corpo { largura máxima: 600px; família de fontes: sans
serifa; cor: #333; }
</estilo>
</head>
<corpo>
<h1>Mundo Tubarão </h1>
<p>A principal fonte mundial sobre

informações relacionadas a <strong>tubarões</strong> .</p>
<h2>Tipos de Tubarões</h2>
<ul>
<li>cabeça de martelo</li>
<li>Tigre</li>
<li>Grande Branco</li>
</ul>
</body>
<script>
const h1 = document.getElementsByTagName('h1')
[0];
const p = document.getElementsByTagName('p')[0];
const ul = document.getElementsByTagName('ul')
[0];
</script>
</html>
Quando carregarmos o arquivo em um navegador da web, veremos uma renderização que parece
como a captura de tela a seguir.

página nodes.html
Neste site de exemplo, temos um documento HTML com alguns elementos.

Algum CSS básico foi adicionado em uma tag de estilo para tornar cada
elemento obviamente visível, e algumas variáveis foram criadas no script
para facilitar o acesso de alguns elementos. Como há apenas um de cada
h1, p e ul, podemos acessar o primeiro índice em cada respectivo
propriedade getElementsByTagName.
Nós Raiz
O objeto de documento é a raiz de cada nó no DOM. Este objeto é, na
verdade, uma propriedade do objeto janela, que é o objeto global de nível superior
objeto que representa uma guia no navegador. a janela objeto tem acesso a informações
como a barra de ferramentas, altura e largura da janela, prompts,

e alertas. O documento consiste no que está dentro do interior
janela.
Abaixo está um gráfico que consiste nos elementos raiz que cada documento
conterá. Mesmo que um arquivo HTML em branco seja carregado em um navegador, esses
três nós serão adicionados e analisados no DOM.
P N NT
documento #document DOCUMENT_NODE
document.documentElement html ELEMENT_NODE
documento.head cabeça ELEMENT_NODE
documento.corpo corpo ELEMENT_NODE
Como os elementos html, head e body são tão comuns, eles
suas próprias propriedades no documento.

Abra o console no DevTools e teste cada uma dessas quatro propriedades
enviando-os e visualizando a saída. Você também pode testar h1, p e ul

que retornará os elementos devido às variáveis que adicionamos no
marca de script.
Nós Pais
Os nós no DOM são referidos como pais, filhos e irmãos, dependendo de sua relação
com outros nós. O pai de qualquer nó é o nó que está um nível acima dele ou mais
próximo do documento no DOM

hierarquia. Existem duas propriedades para obter o pai — parentNode e

parentElement.
P G
parentNode Nó pai
parentElement Nó do elemento pai
Em nosso exemplo nodes.html:
html é o pai de head, body e script.

corpo é o pai de h1, h2, p e ul, mas não li, já que li é dois
níveis abaixo do corpo.
Podemos testar qual é o pai do nosso elemento p com o parentNode

propriedade. Esta variável p vem de nosso costume
document.getElementsByTagName('p')[0] declaração.
p.parentNode;
Saída
ÿ <corpo>...</corpo>
O pai de p é o corpo, mas como podemos obter o avô, que é

dois níveis acima? Podemos fazer isso encadeando propriedades.
p.parentNode.parentNode;
Saída
ÿ <html>...</html>
Usando parentNode duas vezes, recuperamos o avô de p.

Existem propriedades para recuperar o pai de um nó, mas apenas um pequeno
diferença entre eles, conforme demonstrado neste trecho abaixo.
// Atribui o objeto html à variável html
const html = document.documentElement;
console.log(html.parentNode); // > #documento

console.log(html.parentElement); // > nulo
O pai de quase todos os nós é um nó de elemento, pois texto e comentários
não podem ser pais de outros nós. No entanto, o pai de html é um nó de
documento, então parentElement retorna nulo. Geralmente, parentNode é mais
comumente usado ao atravessar o DOM.
Nós Filhos
Os filhos de um nó são os nós que estão um nível abaixo dele. Quaisquer nós além
de um nível de aninhamento são geralmente referidos como descendentes.
P G
childNodes Nós Filhos
primeiro filho Primeiro Nó Filho
últimoFilho Último Nó Filho
crianças Nós filhos do elemento
firstElementChild Nó do primeiro elemento filho
lastElementChild Último Nó de Elemento Filho

A propriedade childNodes retornará uma lista ativa de todos os filhos de um

nó. Você pode esperar que o elemento ul obtenha três elementos li. vamos testar
o que recupera.
ul.childNodes;
Saída
ÿ (7) [texto, li, texto, li, texto, li, texto]
Além dos três elementos li, ele também recebe quatro nós de texto. Isso
ocorre porque escrevemos nosso próprio HTML (não foi gerado por JavaScript) e
o recuo entre os elementos é contado no DOM como nós de texto.
Isso não é intuitivo, pois a guia Elementos do DevTools remove os nós de

espaço em branco.
Se tentássemos alterar a cor de fundo do primeiro nó filho usando a propriedade
firstChild, isso falharia porque o primeiro nó é

texto.
ul.firstChild.style.background = 'amarelo';
[Saída do rótulo_secundário]
TypeError não detectado: não é possível definir a propriedade
'fundo' de indefinido
Os filhos, firstElementChild e lastElementChild
As propriedades existem nesses tipos de situações para recuperar apenas os

nós do elemento. ul.children retornará apenas os três elementos li.
Usando firstElementChild, podemos mudar a cor de fundo de
o primeiro li no ul.
ul.firstElementChild.style.background = 'amarelo';
Ao executar o código acima, sua página da Web será atualizada para modificar a cor
de fundo.
modificação firstElementChild.style.background
Ao fazer a manipulação básica do DOM, como neste exemplo, as propriedades
específicas do elemento são extremamente úteis. Em aplicativos da web gerados por
JavaScript, as propriedades que selecionam todos os nós são mais prováveis de serem
usadas, pois novas linhas de espaço em branco e indentação não existirão neste caso.
um para... de loop pode ser usado para percorrer todos os filhos

elementos.
for (let element of ul.children) {
element.style.background = 'amarelo';
}
Agora, cada elemento filho terá um fundo amarelo.
modificação de elementos infantis
Como nosso elemento p tem texto e elementos dentro dele, o

A propriedade childNodes é útil para acessar essas informações.
for (deixe o elemento de p.childNodes) {
console.log(elemento);
}
Saída
"
"A principal fonte mundial sobre
<strong>tubarões</strong>
" informação relacionada."
childNodes e filhos não retornam arrays com todas as propriedades e

métodos Array , mas eles aparecem e se comportam de forma semelhante aos
arrays JavaScript. Você pode acessar os nós por número de índice ou encontrar seus
propriedade de comprimento.
document.body.children[3].lastElementChild.style.b
ackground = 'fúcsia';
O código acima encontrará o último elemento filho (li) do quarto elemento
filho (ul) de body e aplicará um estilo.
última modificação do elemento filho
Usando propriedades pai e filho, você pode recuperar qualquer nó no

DOM.
nós irmãos
Os irmãos de um nó são qualquer nó no mesmo nível de árvore no DOM.
Irmãos não precisam ser do mesmo tipo de nó - texto, elemento e
nós de comentário podem ser todos irmãos.
P G
irmão anterior Nó irmão anterior
próximoirmão Próximo nó irmão
anteriorElementoIrmão Nó de elemento irmão anterior
próximoElementoIrmão Próximo Nó de Elemento Irmão
As propriedades irmãs funcionam da mesma forma que os nós filhos, em que

existe um conjunto de propriedades para percorrer todos os nós e um conjunto de propriedades para
apenas nós de elementos. PreviousSibling e NextSibling obterão

o próximo nó que imediatamente precede ou segue o nó especificado, e
PreviousElementSibling e nextElementSibling serão apenas
obter nós de elemento.
Em nosso exemplo nodes.html, vamos selecionar o elemento do meio de ul.

const tigre = ul.children[1];
Como criamos nosso DOM do zero e não como um web JavaScript
app, precisaremos usar as propriedades irmãs do elemento para acessar o
nós do elemento anterior e seguinte, pois há espaço em branco no DOM.
tiger.nextElementSibling.style.background =
'coral';
tiger.previousElementSibling.style.background =
'água-marinha';
Executar este código deveria ter aplicado coral ao fundo de
Hammerhead e água-marinha ao fundo de Great White.
modificação do elemento irmão
As propriedades irmãs podem ser encadeadas, assim como as propriedades

pai e nó.
Conclusão
Neste tutorial, abordamos como acessar os nós raiz de cada documento
HTML e como percorrer a árvore DOM pelas propriedades pai, filho e irmã.
Com o que você aprendeu em Como acessar elementos no DOM e este

tutorial, você poderá acessar com confiança qualquer nó no DOM de qualquer
site.
Como fazer alterações no DOM

Nas duas partes anteriores do Compreendendo o DOM Series,
aprendemos como acessar elementos no DOM e como percorrer o
DOM. Usando esse conhecimento, um desenvolvedor pode usar classes, tags, ids e
seletores para encontrar qualquer nó no DOM e usar pai, filho e irmão
properties para encontrar nós relativos.
O próximo passo para se tornar mais proficiente com o DOM é

aprenda como adicionar, alterar, substituir e remover nós. Uma lista de tarefas
aplicativo é um exemplo prático de um programa JavaScript no qual você
precisaria ser capaz de criar, modificar e remover elementos no DOM.
Neste tutorial, veremos como criar novos nós e inseri-los
no DOM, substitua os nós existentes e remova os nós.
Criando novos nós

Em um site estático, os elementos são adicionados à página escrevendo HTML
diretamente em um arquivo .html. Em um aplicativo da Web dinâmico, os elementos
e o texto geralmente são adicionados com JavaScript. Os métodos createElement()
e createTextNode() são usados para criar novos nós no DOM.
PM D
criarElemento() Criar um novo nó de elemento
criarTextNode() Criar um novo nó de texto
node.textContent Obter ou definir o conteúdo de texto de um nó de elemento
node.innerHTML Obter ou definir o conteúdo HTML de um elemento
Para começar, vamos criar um arquivo index.html e salvá-lo em um novo projeto

diretório.
index.html
<!DOCTYPE html>
<html lang="en">
<cabeça>
</head>
<corpo>
<h1>Modelo de objeto de documento </
h1> </body>
</html>
Clique com o botão direito do mouse em qualquer lugar da página e selecione "Inspecionar" para abrir
Ferramentas do desenvolvedor e, em seguida, navegue até o console.
Usaremos createElement() no objeto de documento para criar um

novo elemento p.
parágrafo const = document.createElement('p');
Criamos um novo elemento p, que podemos testar no console.
console.log(parágrafo)
Saída
<p></p>
A variável de parágrafo produz um elemento p vazio, que não é muito útil sem
nenhum texto. Para adicionar texto ao elemento, vamos definir a propriedade
textContent.
paragrafo.textContent = "Sou um novo
parágrafo.";
console.log(parágrafo)
Saída
<p>Sou um novo parágrafo.</p>
Uma combinação de createElement() e textContent cria um

nó de elemento completo.
Um método alternativo de definir o conteúdo do elemento é com a propriedade
innerHTML, que permite adicionar HTML e texto ao
um elemento.
parágrafo.innerHTML = "Sou um parágrafo com
texto em <strong>negrito</strong>.";
Observação: Embora isso funcione e seja um método comum de adicionar

conteúdo a um elemento, existe a possibilidade de script entre sites (XSS) risco
associado ao uso do método innerHTML, pois o JavaScript embutido pode ser
adicionado a um elemento. Portanto, é recomendável usar textContent em vez disso,
que removerá as tags HTML.
Também é possível criar um nó de texto com o createTextNode()

método.
const text = document.createTextNode("Sou um novo
nó de texto.");
console.log(texto)
Saída
"Sou um novo nó de texto."
Com esses métodos, criamos novos elementos e nós de texto, mas
eles não são visíveis no front-end de um site até que tenham sido
inserido no documento.
Inserindo nós no DOM

Para ver os novos nós de texto e elementos que criamos no front-end,
precisaremos inseri-los no documento. Os métodos
appendChild() e insertBefore() são usados para adicionar itens ao
início, meio ou fim de um elemento pai e replaceChild() é
usado para substituir um nó antigo por um novo nó.

PM D
node.appendChild() Adicionar um nó como o último filho de um elemento pai
node.insertBefore() Inserir um nó no elemento pai antes de um especificado
nó irmão
node.replaceChild() Substitua um nó existente por um novo nó
Para praticar esses métodos, vamos criar uma lista de tarefas em HTML:
todo.html
<ul>
<li>Comprar mantimentos</li>
<li>Alimentar o gato</li>
<li>Lavar roupa</li>
</ul>
Quando você carregar sua página no navegador, ela ficará assim:

Captura de tela 1 do DOM
Para adicionar um novo item ao final da lista de tarefas, temos que criar
o elemento e adicione texto a ele primeiro, como fizemos em “Criando novos nós”
seção acima.
// elemento ul da lista de tarefas
const todoList = document.querySelector('ul');
// Cria uma nova tarefa
const newTodo = document.createElement('li');
newTodo.textContent = 'Fazer o dever de casa';
Agora que temos um elemento completo para nossa nova tarefa, podemos adicioná-lo
ao final da lista com appendChild().

// Adiciona novo todo ao final da lista
todoList.appendChild(newTodo);
Você pode ver que o novo elemento li foi anexado ao final do

ul.
todo.html
<ul>
<li>Faça o dever de casa</li>
</ul>
Talvez tenhamos uma tarefa de maior prioridade para fazer e queremos

adicioná-la ao início da lista. Teremos que criar outro elemento, como
createElement() cria apenas um elemento e não pode ser reutilizado.

// Cria uma nova tarefa
const outroTodo = document.createElement('li');
outroTodo.textContent = 'Pagar contas';

Podemos adicioná-lo ao início da lista usando insertBefore().
Esse método usa dois argumentos — o primeiro é o novo nó filho a ser adicionado
e o segundo é o nó irmão que seguirá imediatamente o novo nó. Em outras palavras,
você está inserindo o novo nó antes do próximo nó irmão. Isso será semelhante ao
seguinte pseudocódigo:
parentNode.insertBefore(newNode, nextSibling);
Para nosso exemplo de lista de tarefas, adicionaremos o novo elemento

anotherTodo antes do primeiro elemento filho da lista, que atualmente é o item
da lista Comprar mantimentos.
// Adiciona uma nova tarefa ao início da lista
todoList.insertBefore(anotherTodo,
todoList.firstElementChild);
todo.html
<ul>
<li>Pagar contas</li>
</ul>
O novo nó foi adicionado com sucesso no início da lista.

Agora sabemos como adicionar um nó a um elemento pai. A próxima coisa que nós
pode querer fazer é substituir um nó existente por um novo nó.

Modificaremos uma tarefa existente para demonstrar como substituir um nó.
A primeira etapa da criação de um novo elemento permanece a mesma.
constmodifiedTodo = document.createElement('li');
modificadoTodo.textContent = 'Alimente o cachorro';

Como insertBefore(), replaceChild() recebe dois argumentos — o novo nó e o nó
a ser substituído, conforme mostrado no pseudocódigo
abaixo de.
parentNode.replaceChild(newNode, oldNode);
Substituiremos o terceiro elemento filho da lista pelo modificado para

Faz.
// Substitui a tarefa existente pela tarefa modificada

todoList.replaceChild(modifiedTodo,
todoList.children[2]);
todo.html
<ul>
<li>Compre mantimentos</li>
<li>Dê comida ao cachorro</li>
<li>Lave a roupa</li>
</ul>
Com uma combinação de appendChild(), insertBefore() e

replaceChild(), você pode inserir nós e elementos em qualquer lugar no
DOM.
Removendo nós do DOM

Agora sabemos como criar elementos, adicioná-los ao DOM e modificar
os elementos existentes. A etapa final é aprender a remover nós existentes
do DOM. Os nós filhos podem ser removidos de um pai com removeChild()
e o próprio nó pode ser removido com remove().
M D
node.removeChild() Remover nó filho
node.remove() Remover nó
Usando o exemplo de tarefas acima, queremos excluir itens depois que eles
concluído. Se você completou sua lição de casa, você pode remover o Do
item de lição de casa, que passa a ser o último filho da lista, com
removeCriança().
todoList.removeChild(todoList.lastElementChild);
todo.html
<ul>
<li>Alimente o cachorro</li>
<li>Lave a roupa</li>
</ul>
Outro método poderia ser remover o próprio nó, usando o método remove()
diretamente no nó.
// Remove o segundo elemento filho de todoList
todoList.children[1].remove();
todo.html
<ul>
<li>Pague as contas</
li> <li>Alimente o cachorro</li>
</ul>
Entre removeChild() e remove(), você pode remover qualquer nó do

DOM. Outro método que você pode ver para remover elementos filho do
DOM é definir a propriedade innerHTML de um elemento pai como uma
string vazia (""). Este não é o método preferido porque é menos explícito,
mas você pode vê-lo no código existente.
Conclusão
Neste tutorial, aprendemos como usar JavaScript para criar novos nós e
elementos e inseri-los no DOM, além de substituir e remover os existentes
nós e elementos.
Neste ponto da série Compreendendo o DOM você sabe como acessar
qualquer elemento no DOM, percorrer qualquer nó no DOM e
modificar o próprio DOM. Agora você pode se sentir confiante ao criar aplicativos da
Web front-end básicos com JavaScript.

Como modificar atributos, classes e

Estilos no DOM

No tutorial anterior desta série, “Como fazer alterações no DOM,” cobrimos como
criar, inserir, substituir e remover elementos do Document Object Model (DOM) com
métodos integrados. Ao aumentar sua proficiência na manipulação do DOM, você
poderá utilizar melhor os recursos interativos do JavaScript e modificar elementos
da web.
Neste tutorial, aprenderemos como alterar ainda mais o DOM modificando estilos,
classes e outros atributos de nós de elemento HTML. Isso lhe dará uma maior
compreensão de como manipular elementos essenciais dentro
o DOM.
Revisão da Seleção de Elementos
Até recentemente, uma popular biblioteca JavaScript chamada jQuery foi usado com
mais frequência para selecionar e modificar elementos no DOM. jQuery simplificou o
processo de selecionar um ou mais elementos e aplicar alterações a todos eles ao mesmo tempo.
mesmo tempo. Em “Como acessar elementos no DOM,” revisamos o DOM
métodos para pegar e trabalhar com nós no JavaScript vanilla.
Para Reveja, document.querySelector() e
document.getElementById() são os métodos usados para acessar um

único elemento. Usando um div com um atributo id no exemplo abaixo, podemos
acessar esse elemento de qualquer maneira.
<div id="demo-id"> ID da demonstração</div>

O método querySelector() é mais robusto porque pode selecionar um

elemento na página por qualquer tipo de seletor.
// Ambos os métodos retornarão um único elemento

const demoId = document.querySelector('#demo-id');
Acessando um único elemento, podemos facilmente atualizar uma parte do elemento como
como o texto dentro.
// Muda o texto de um elemento

demoId.textContent = 'Texto de ID de demonstração atualizado.';
No entanto, ao acessar vários elementos por um seletor comum, como uma classe
específica, temos que percorrer todos os elementos da lista. No código abaixo, temos
dois elementos div com um valor de classe comum.
<div class="demo-class"> Aula de demonstração 1</div>

<div class="demo-class"> Aula de demonstração 2</div>
Usaremos querySelectorAll() para obter todos os elementos com a classe de

demonstração aplicada a eles e forEach() para percorrê-los e aplicar uma alteração.
Também é possível acessar um elemento específico com querySelectorAll() da mesma
forma que faria com um array — usando
notação de colchetes.
// Obtém uma NodeList de todos os elementos .demo
const demoClasses = document.querySelectorAll('.demo
classe');
// Altere o texto de vários elementos com um loop
demoClasses.forEach(elemento => {
element.textContent = 'Todas as aulas de demonstração atualizadas.';
});
// Acessar o primeiro elemento na NodeList
demoClasses[0];
Essa é uma das diferenças mais importantes a serem observadas ao progredir do jQuery
para o JavaScript vanilla. Muitos exemplos de modificação de elementos não explicam o
processo de aplicação desses métodos e propriedades a vários elementos.
As propriedades e métodos neste artigo geralmente serão anexados ao evento

ouvintes para responder a cliques, hovers ou outros gatilhos.
Observação: Os métodos getElementsByClassName() e
getElementsByTagName() retornará coleções HTML que não
têm acesso ao método forEach() que querySelectorAll() possui.
Nesses casos, você precisará usar um loop for padrão para iterar através do
coleção.
Modificando Atributos
Atributos são valores que contêm informações adicionais sobre HTML
elementos. Eles geralmente vêm em pares de nome/valor e podem ser essenciais

dependendo do elemento.
Alguns dos atributos HTML mais comuns são o atributo src de um
img tag, o href de uma tag, classe, id e estilo. Para obter uma lista completa de atributos
HTML, veja a lista de atributos na Mozilla Developer Network.
Os elementos personalizados que não fazem parte do padrão HTML serão anexados
com dados-.
Em JavaScript, temos quatro métodos para modificar os atributos do elemento:
M D E
hasAttribute() Retorna um verdadeiro ou falso element.hasAttribute('href');
boleano
getAttribute() Retorna o valor de um element.getAttribute('href');
atributo especificado ou nulo
setAttribute() Adiciona ou atualiza o valor de um element.setAttribute('href',
atributo especificado 'index.html');
removeAttribute() Remove um atributo de element.removeAttribute('href');
um elemento
Vamos criar um novo arquivo HTML com uma tag img com um atributo. Vamos criar um link
para uma imagem pública disponível por meio de um URL, mas você pode trocá-la por uma
imagem local alternativa se estiver trabalhando offline.

attribute.html
<!DOCTYPE html>
<html lang="en">
<corpo>
<img src="https://js
tutorials.nyc3.digitaloceanspaces.com/shark.png">
</body>
</html>
Quando você carrega o arquivo HTML acima em um navegador moderno e abre

o console do desenvolvedor integrado , você deve ver algo assim:
Primeira renderização de classes.html
Agora, podemos testar todos os métodos de atributo em tempo real.
// Atribuir elemento de imagem

const img = document.querySelector('img');
img.hasAttribute('src'); // retorna
verdadeiro
img.getAttribute('src'); // retorna
"...tubarão.png"
img.removeAttribute('src'); // remova o
atributo e valor src
Neste ponto, você terá removido o atributo src e o valor associado a img, mas
pode redefinir esse atributo e atribuir o valor a um alternativo
imagem com img.setAttribute():
img.setAttribute('src', 'https://js
tutoriais.nyc3.digitaloceanspaces.com/octopus.png');
Segunda renderização de classes.html
Por fim, podemos modificar o atributo diretamente atribuindo um novo valor

ao atributo como uma propriedade do elemento, definindo o src de volta para o
arquivo shark.png
img.src = 'https://js
tutorials.nyc3.digitaloceanspaces.com/shark.png';
Qualquer atributo pode ser editado desta forma, bem como com os métodos acima.
Os métodos hasAttribute() e getAttribute() são geralmente usados com instruções

condicionais, e os métodos setAttribute() e removeAttribute() são usados para
modificar diretamente o DOM.
Modificando Classes
a classe O atributo corresponde aos seletores de classe CSS. Isso não deve ser
confundido com classes ES6, um tipo especial de função JavaScript.
As classes CSS são usadas para aplicar estilos a vários elementos, ao contrário
dos IDs, que só podem existir uma vez por página. Em JavaScript, temos o className
e classList properties para trabalhar com o atributo de classe.
M/PD E
nome da classe Obtém ou define elemento.className;
valor de classe
classList.add() Adiciona um ou element.classList.add('active');
mais classe
valores
classList.toggle() Alterna uma classe element.classList.toggle('ativo');
ligado ou desligado
classList.contains() Verifica se a classe element.classList.contains('active');
valor existe
classList.replace() Substituir um element.classList.replace('velho',
classe existente 'novo');
valor com um
novo valor de classe
classList.remove() Remover uma classe element.classList.remove('active');
valor
Faremos outro arquivo HTML para trabalhar com os métodos da classe, com dois
elementos e algumas classes.
classes.html
<!DOCTYPE html>
<html lang="en">
<estilo>
corpo {
largura máxima: 600px;
margem: 0 automático;
família da fonte: sans-serif;
}
.ativo {
borda: 2px azul sólido ;
}
.aviso {
borda: 2px vermelho sólido ;
}
.oculto {
exibição: nenhum;
}
div {
borda: 2px tracejado cinza claro;
preenchimento: 15px;
margem: 5px;
}
</estilo>
<corpo>
<div>Div 1</div>
<div class="active">Div 2</div>
</body>
</html>
Ao abrir o arquivo classes.html em um navegador da Web, você deve

receber uma renderização semelhante à seguinte:
Primeira renderização de classes.html

A propriedade className foi introduzida para evitar conflitos com a palavra-

chave class encontrada em JavaScript e outras linguagens que têm acesso ao
DOM. Você pode usar className para atribuir um valor diretamente à classe.
// Seleciona o primeiro div
const div = document.querySelector('div');
// Atribui a classe de aviso ao primeiro div
div.className = 'aviso';
Atribuímos a classe de aviso definida nos valores CSS de

classes.html para o primeiro div. Você receberá a seguinte saída:
Segunda renderização de classes.html

Observe que se alguma classe já existir no elemento, isso irá sobrescrevê-la.

Você pode adicionar várias classes delimitadas por espaço usando a propriedade
className ou usá-la sem operadores de atribuição para obter o valor da classe
no elemento.
A outra maneira de modificar as classes é por meio do classList

propriedade, que vem com alguns métodos úteis. Esses métodos são
semelhantes aos métodos jQuery addClass, removeClass e toggleClass.
// Selecione o segundo div pelo nome da classe
const activeDiv = document.querySelector('.active');
activeDiv.classList.add('escondido'); //
Adicione a classe oculta
activeDiv.classList.remove('escondido'); //
Remova a classe oculta
activeDiv.classList.toggle('oculto'); //
Alternar entre verdadeiro e falso oculto
activeDiv.classList.replace('ativo', 'aviso'); //
Substitua a classe ativa pela classe de aviso
Depois de executar os métodos acima, sua página da Web ficará assim:

Renderização final de classes.html
Ao contrário do exemplo className, usar classList.add() adicionará uma nova classe à lista de
classes existentes. Você também pode adicionar várias classes como strings separadas por
vírgula. Também é possível usar setAttribute para modificar a classe de um elemento.
Modificando Estilos
o estilo A propriedade representa os estilos embutidos em um elemento HTML. Freqüentemente,
os estilos serão aplicados aos elementos por meio de uma folha de estilo, como fizemos
anteriormente neste artigo, mas às vezes temos que adicionar ou editar um estilo embutido diretamente.
Faremos um pequeno exemplo para demonstrar estilos de edição com JavaScript. Abaixo está
um novo arquivo HTML com um div que possui alguns estilos embutidos aplicados para exibir um
quadrado.
estilos.html
<!DOCTYPE html>
<html lang="en">
<corpo>
<div style="altura: 100px;

largura: 100px;
borda: 2px preto sólido;">Div</div>
</body>
</html>
Quando aberto em um navegador da Web, o styles.html parecerá algo

como isso:
Primeira renderização de styles.html
Uma opção para editar os estilos é com setAttribute().
// Selecione a divisão
const div = document.querySelector('div');
// Aplica estilo a div

div.setAttribute('estilo', 'alinhamento de texto: centro');
No entanto, isso removerá todos os estilos embutidos existentes do elemento.

Como esse provavelmente não é o efeito pretendido, é melhor usar o atributo de estilo
diretamente
div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px preto sólido';
As propriedades CSS são escritas em kebab-case, que são palavras minúsculas
separadas por hífens. É importante observar que as propriedades CSS kebab-case não
podem ser usadas na propriedade de estilo JavaScript. Em vez disso, eles serão
substituídos por seu equivalente camelCase, que é quando a primeira palavra é minúscula
e todas as palavras subsequentes são maiúsculas. Em outras palavras, em vez de alinhar
o texto, usaremos textAlign para a propriedade de estilo do JavaScript.
// Torna o div em um círculo e centraliza verticalmente o

texto
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'centro';
div.style.alignItems = 'centro';
Depois de concluir as modificações de estilo acima, sua renderização final de

estilos.html mostrará um círculo:
Renderização final de styles.html
Se muitas mudanças estilísticas forem aplicadas a um elemento, o melhor curso

de ação é aplicar os estilos a uma classe e adicionar uma nova classe. No entanto,
há alguns casos em que a modificação do atributo de estilo embutido será
necessária ou mais direta.
Conclusão
Os elementos HTML geralmente têm informações adicionais atribuídas a eles na
forma de atributos. Os atributos podem consistir em pares nome/valor, e alguns
dos atributos mais comuns são classe e estilo.
Neste tutorial, aprendemos como acessar, modificar e remover atributos em um
elemento HTML no DOM usando JavaScript simples. Também aprendemos como
adicionar, remover, alternar e substituir classes CSS em um elemento e como editar
estilos CSS embutidos. Para leitura adicional, confira a documentação

sobre atributos na Mozilla Developer Network.
Compreendendo eventos em JavaScript
No Entendimento do DOM série, discutimos a árvore DOM
e como acessar, atravessar, adicionar e remover, e modificar nós e
usando o Developer Tools Console.
Embora neste ponto possamos agora fazer quase qualquer mudança que quisermos
o DOM, do ponto de vista do usuário, não é muito útil porque temos
apenas alterações acionadas manualmente. Ao aprender sobre os eventos, vamos
entender como amarrar tudo junto para fazer sites interativos.
Eventos são ações que ocorrem no navegador que podem ser iniciadas por
seja o usuário ou o próprio navegador. Abaixo estão alguns exemplos de
eventos que podem acontecer em um site:
A página termina de carregar

O usuário clica em um botão
O usuário passa o mouse sobre um menu suspenso
O usuário envia um formulário
O usuário pressiona uma tecla no teclado
Ao codificar respostas JavaScript que são executadas em um evento, os desenvolvedores
pode exibir mensagens para usuários, validar dados, reagir a um clique de botão e
muitas outras ações.
Neste artigo, veremos manipuladores de eventos, ouvintes de eventos e eventos
objetos. Também abordaremos três maneiras diferentes de escrever código para lidar com
eventos e alguns dos eventos mais comuns. Ao aprender sobre os eventos, você poderá criar uma
experiência na Web mais interativa para os usuários finais.
Manipuladores de eventos e ouvintes de eventos
Quando um usuário clica em um botão ou pressiona uma tecla, um evento é disparado. Eles são chamados
de evento de clique ou evento de pressionamento de tecla, respectivamente.
Um manipulador de eventos é uma função JavaScript que é executada quando um evento é acionado.
Um ouvinte de eventos anexa uma interface responsiva a um elemento, o que permite que esse elemento
específico aguarde e “escute” o evento fornecido.
fogo.
Há três maneiras de atribuir eventos a elementos: - Manipuladores de eventos embutidos - Propriedades
do manipulador de eventos - Ouvintes de eventos
Analisaremos todos os três métodos para garantir que você esteja familiarizado com cada maneira de
acionar um evento e, em seguida, discutir os prós e contras de cada um.
método.
Atributos do manipulador de eventos em linha
Para começar a aprender sobre manipuladores de eventos, vamos primeiro considerar o manipulador de
eventos inline. Vamos começar com um exemplo bem básico que consiste em um elemento de botão e um
elemento ap. Queremos que o usuário clique no botão para alterar o conteúdo do texto do p.
Vamos começar com uma página HTML com um botão no corpo. nós estaremos
referenciando um arquivo JavaScript ao qual adicionaremos código em breve.

eventos.html
<!DOCTYPE html>
<html lang="en-US">
<cabeça>
<title>Eventos</title>
</head>
<corpo>

<button>Clique em mim</button>
<p>Tente me mudar .</p>
</body>


<script src="js/events.js"></script>
</html>
Diretamente no botão, adicionaremos um atributo chamado onclick. o

O valor do atributo será uma função que criamos chamada changeText().
eventos.html
<!DOCTYPE html>
<html lang="en-BR">
<cabeça>
</head>
<corpo>
<button onclick="changeText()">Clique
eu</button>
<p>Tente me mudar .</p>
</body>
<script src="js/events.js"></script>
</html>
Vamos criar nosso arquivo events.js, que colocamos no diretório js/ aqui.
Dentro dela, criaremos a função changeText(), que modificará o textContent do
elemento p.
js/eventos.js
// Função para modificar o conteúdo do texto do
parágrafo
const changeText = () => {
const p = document.querySelector('p');
p.textContent = "Mudei por causa de um

manipulador de eventos inline.";
Ao carregar o events.html pela primeira vez, você verá uma página que parece
como isso:
Primeira renderização de events.html

No entanto, quando você ou outro usuário clicar no botão, o texto da tag p mudará de Try
to change me. para eu mudei

por causa de um manipulador de eventos inline.:
Primeira resposta ao evento na renderização de events.html
Os manipuladores de eventos inline são uma maneira direta de começar a entender
eventos, mas geralmente não devem ser usados além de testes e
Finalidade educacional.
Você pode comparar manipuladores de eventos inline com estilos CSS inline em um HTML
elemento. É muito mais prático manter uma folha de estilo separada de
classes do que criar estilos embutidos em cada elemento, assim como é mais
possível manter o JavaScript que é manipulado inteiramente por meio de um
arquivo de script do que adicionar manipuladores a cada elemento.
Propriedades do manipulador de eventos

A próxima etapa de um manipulador de eventos embutido é a propriedade do manipulador
de eventos. Isso funciona de maneira muito semelhante a um manipulador embutido, exceto
que estamos definindo a propriedade de um elemento em JavaScript em vez do atributo em

o HTML.
A configuração será a mesma aqui, exceto que não incluímos mais o

onclick="changeText()" na marcação:
eventos.html
...
<corpo>
<p>Vou mudar.</p>
</body>
...
Nossa função também permanecerá semelhante, exceto que agora precisamos
acessar o elemento de botão no JavaScript. Podemos simplesmente acessar onclick da
mesma forma que acessamos style ou id ou qualquer outra propriedade de elemento e,
em seguida, atribuir a referência de função.

js/eventos.js

parágrafo
p.textContent = "Mudei devido a um evento

propriedade do manipulador.";
}
// Adiciona o manipulador de eventos como uma propriedade do botão

elemento
botão const = document.querySelector('button');

button.onclick = changeText;
Nota: Os manipuladores de eventos não seguem a convenção camelCase que a maioria
Código JavaScript adere. Observe que o código é onclick, não

onClick.
Quando você carregar a página pela primeira vez, o navegador exibirá o seguinte:
Carregamento inicial de events.html com manipulador de eventos
Agora, quando você clicar no botão, terá um efeito semelhante ao anterior:
Resposta com manipulador de eventos de events.html
Observe que ao passar uma referência de função para a propriedade onclick,

não incluímos parênteses, pois não estamos invocando a função naquele
momento, mas apenas passando uma referência a ela.
A propriedade do manipulador de eventos é um pouco mais fácil de manter do que
o manipulador inline, mas ainda apresenta alguns dos mesmos obstáculos. Por
exemplo, tentar definir várias propriedades onclick separadas fará com que todas,
exceto a última, sejam substituídas, conforme demonstrado abaixo.
js/eventos.js
botão const = document.querySelector('botão');
p.textContent = "Vou mudar?";

}
const alertText = () => {
alert('Vou alertar?');
// Os eventos podem ser sobrescritos
button.onclick = changeText;
button.onclick = alertText;
No exemplo acima, o clique do botão exibiria apenas um alerta, e não alteraria o
texto p, pois o código alert() foi o último adicionado à propriedade.

Resposta final por meio do manipulador de eventos de events.html
Com uma compreensão dos manipuladores de eventos embutidos e das propriedades do
manipulador de eventos, vamos passar para os ouvintes de eventos.
Ouvintes de eventos
A adição mais recente aos manipuladores de eventos JavaScript são os ouvintes de

eventos. Um ouvinte de evento observa um evento em um elemento. Em vez de
atribuir o evento diretamente a uma propriedade no elemento, usaremos o
addEventListener() para escutar o evento.
addEventListener() usa dois parâmetros obrigatórios — o evento que deve ser

escutado e a função de retorno de chamada do ouvinte.
O HTML para nosso ouvinte de eventos será o mesmo do exemplo anterior.
eventos.html
...
<p>Vou mudar.</p>
...
Ainda estaremos usando a mesma função changeText() de antes.

Vamos anexar o método addEventListener() ao botão.
js/eventos.js

parágrafo
p.textContent = "Mudei devido a um evento

ouvinte.";
}
// Escuta o evento click

button.addEventListener('click', changeText);
Observe que com os dois primeiros métodos, um evento de clique foi referido como
onclick, mas com ouvintes de evento é referido como click. Cada ouvinte de evento
retira o on da palavra. Na próxima seção, veremos mais exemplos de outros tipos de
eventos.
Ao recarregar a página com o código JavaScript acima, você
receber a seguinte saída:
Resposta do ouvinte de eventos de events.html
À primeira vista, os ouvintes de eventos parecem muito semelhantes às propriedades
do manipulador de eventos, mas têm algumas vantagens. Podemos definir vários
ouvintes de eventos no mesmo elemento, conforme demonstrado no exemplo abaixo.

js/eventos.js

}
const alertText = () => {
alert('Vou alertar?');
// Múltiplos ouvintes podem ser adicionados ao mesmo

evento e elemento
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);
Neste exemplo, ambos os eventos serão acionados, fornecendo ao usuário um

alerta e texto modificado uma vez clicando fora do alerta.
Freqüentemente, funções anônimas serão usadas em vez de uma referência de função
em um ouvinte de evento. Funções anônimas são funções que não são

nomeado.
// Uma função anônima em um ouvinte de evento

});
Também é possível usar a função removeEventListener() para

remover um ou todos os eventos de um elemento.
// Remove a função de alerta do elemento do botão
button.removeEventListener('click', alertText);
Além disso, você pode usar addEventListener() no documento
e objeto de janela.
Os ouvintes de evento são atualmente a maneira mais comum e preferida de
manipular eventos em JavaScript.
Eventos Comuns
Aprendemos sobre manipuladores de eventos inline, propriedades do manipulador de
eventos e ouvintes de eventos usando o evento click, mas há muitos outros eventos
em JavaScript. Veremos abaixo alguns dos eventos mais comuns.
Eventos do mouse
Os eventos de mouse estão entre os eventos usados com mais frequência. Eles se referem a
eventos que envolvem clicar em botões do mouse ou passar o mouse e mover
o ponteiro do mouse. Esses eventos também correspondem à ação equivalente

em um dispositivo de toque.
E D
clique Dispara quando o mouse é pressionado e solto em um elemento
dblclick Dispara quando um elemento é clicado duas vezes
mouseenter Dispara quando um ponteiro entra em um elemento
mouseleave Dispara quando um ponteiro sai de um elemento
mousemove Dispara toda vez que um ponteiro se move dentro de um elemento
Um clique é um evento composto composto por eventos mousedown e mouseup
combinados, que são acionados quando o botão do mouse é pressionado ou levantado,
respectivamente.
Usar mouseenter e mouseleave em conjunto recria um foco
efeito que dura enquanto o ponteiro do mouse estiver sobre o elemento.
Eventos de formulário
Eventos de formulário são ações que pertencem a formulários, como elementos de entrada
sendo selecionado ou desmarcado e formulários sendo enviados.
E D
submit Dispara quando um formulário é enviado
focus Dispara quando um elemento (como uma entrada) recebe o foco
blur Dispara quando um elemento perde o foco
O foco é alcançado quando um elemento é selecionado, por exemplo, através de um
clique do mouse ou navegando até ele com a tecla TAB.

O JavaScript costuma ser usado para enviar formulários e enviar os valores para uma
linguagem de back-end. A vantagem de usar JavaScript para enviar formulários é que ele não
requer um recarregamento de página para enviar o formulário, e o JavaScript pode ser usado
para validar os campos de entrada obrigatórios.
Eventos de Teclado
Eventos de teclado são usados para lidar com ações de teclado, como pressionar uma tecla,
levantar uma tecla e manter uma tecla pressionada.
E D
keydown Dispara uma vez quando uma tecla é pressionada
teclado Dispara uma vez quando uma tecla é liberada
keypress Dispara continuamente enquanto uma tecla é pressionada
Embora pareçam semelhantes, os eventos keydown e keypress não
acessar exatamente as mesmas chaves. Embora o keydown reconheça cada
tecla pressionada, o pressionamento de tecla omitirá as teclas que não produzem um
caractere, como SHIFT, ALT ou DELETE.
Os eventos de teclado possuem propriedades específicas para acessar teclas individuais.
Se um parâmetro, conhecido como objeto de evento, for passado para o
ouvinte de evento, podemos acessar mais informações sobre a ação que ocorreu
Lugar, colocar. Três propriedades que pertencem a objetos de teclado incluem keyCode,
chave e código.
Por exemplo, se o usuário pressionar a tecla da letra a em seu teclado, o
as seguintes propriedades pertencentes a essa chave aparecerão:

P D E
keyCode Um número pertencente à chave 65
chave Representa o nome do personagem uma
código Representa a tecla física que está sendo pressionada KeyA
Para mostrar como coletar essas informações por meio do Console JavaScript,
pode escrever as seguintes linhas de código.
// Testa as propriedades keyCode, key e code
document.addEventListener('keydown', event => {
console.log('chave: ' + event.keyCode);
console.log('chave: ' + evento.chave);
console.log('código: ' + event.code);
});
Depois de pressionar ENTER no console, agora podemos pressionar uma tecla no

teclado, neste exemplo, vamos pressionar a.
Saída
código-chave: 65
chave: um
código: KeyA
A propriedade keyCode é um número que pertence à tecla que foi pressionada. A
propriedade chave é o nome do personagem, que pode

change — por exemplo, pressionar a com SHIFT resultaria em uma tecla A. A propriedade
code representa a tecla física no teclado.
Observe que keyCode está em processo de descontinuação e é preferível usar código
em novos projetos.
Para saber mais, você pode ver a lista completa de eventos na Mozilla Developer
Network.
Objetos de evento
O objeto Event consiste em propriedades e métodos que todos os eventos podem
acessar. Além do objeto Event genérico, cada tipo de evento possui suas próprias
extensões, como KeyboardEvent e MouseEvent.
O objeto Event é passado por uma função de ouvinte como um parâmetro.
Geralmente é escrito como evento ou e. Podemos acessar a propriedade de código do
evento keydown para replicar os controles de teclado de um jogo de PC.
Para experimentá-lo, crie um arquivo HTML básico com tags <p> e carregue-o em um
navegador.
evento-teste-p.html
<!DOCTYPE html>
<html lang="en-US">
<cabeça>
</head>
<corpo>
<p></p>
</body>
</html>
Em seguida, digite o seguinte código JavaScript no desenvolvedor do seu navegador
Console.
// Passa um evento para um ouvinte
document.addEventListener('keydown', event => {
var element = document.querySelector('p');
// Definir variáveis para códigos keydown
var a = 'ChaveA';
var s = 'ChaveS';
var d = 'ChaveD';
var w = 'ChaveW';
// Define uma direção para cada código
switch (código do evento) {
caso a:
element.textContent = 'Esquerda';
pausa;
caso :
element.textContent = 'Inativo';
pausa;
caso d:
element.textContent = 'Direito';
pausa;
caso w:
element.textContent = 'Para cima';

pausa;
}
});
Ao pressionar uma das teclas — a, s, d ou w — você verá a saída
semelhante ao seguinte:
Primeiro exemplo de objeto de evento
A partir daqui, você pode continuar a desenvolver como o navegador responderá ao
usuário que pressiona essas teclas e pode criar um ambiente mais dinâmico
local na rede Internet.
Em seguida, examinaremos uma das propriedades de evento usadas com mais
frequência: a propriedade de destino. No exemplo a seguir, temos três div

elementos dentro de uma seção.
evento-teste-div.html
<!DOCTYPE html>
<html lang="en-US">
<cabeça>
</head>
<corpo>
<seção>
<div id="one">Um</div>
<div id="two">Dois</div>
<div id="three">Três</div>
</section>
</body>
</html>
Usando event.target com JavaScript no console do desenvolvedor do

navegador, podemos colocar um ouvinte de evento no elemento da seção externa
e obter o elemento aninhado mais profundamente.
const seção = document.querySelector('seção');
// Imprime o alvo selecionado
section.addEventListener('clique', evento => {
console.log(event.target);
});
Clicar em qualquer um desses elementos retornará a saída do relevante
elemento específico para o console usando event.target. Isso é extremamente

útil, pois permite colocar apenas um event listener que pode ser usado para
acessar muitos elementos aninhados.
Exemplo de segundo objeto de evento
Com o objeto Event, podemos configurar respostas relacionadas a todos os eventos,
incluindo eventos genéricos e extensões mais específicas.

Conclusão
Eventos são ações que ocorrem em um site, como clicar, passar o mouse,
enviar um formulário, carregar uma página ou pressionar uma tecla no teclado.
JavaScript torna-se verdadeiramente interativo e dinâmico quando somos capazes de
fazer com que os sites respondam às ações do usuário.
Neste tutorial, aprendemos o que são eventos, exemplos de
eventos, a diferença entre manipuladores de eventos e ouvintes de eventos e como
para acessar o objeto Evento. Usando esse conhecimento, você será capaz de
começar a fazer sites e aplicativos dinâmicos.

Untitled

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Untitled

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

Machine Translated by Google

Este trabalho está licenciado sob Creative Commons Attribution-NonCommercial-ShareAlike 4.0

Entendendo o DOM — Documento

DigitalOcean, Nova York, Nova York, EUA

Entendendo o DOM — Documento

4. Compreendendo a árvore e os nós DOM

6. Como percorrer o DOM

7. Como fazer alterações no DOM 8. Como

modificar atributos, classes e estilos no DOM 9. Compreendendo eventos em

A DigitalOcean é uma plataforma de serviços em nuvem que oferece a simplicidade

os desenvolvedores adoram e as empresas confiam para executar aplicativos de produção em

escala. Ele fornece computação altamente disponível, segura e escalável, armazenamento

Fundada em 2012 com escritórios em Nova York e Cambridge, MA,

A DigitalOcean oferece preços transparentes e acessíveis, um usuário elegante

interface e uma das maiores bibliotecas de recursos de código aberto

acessível. Para mais em formação, por favor Visita

https://www.digitalocean.com ou siga @digitalocean no Twitter.

Sobre este livro

Este livro é baseado no livro Compreendendo o DOM série de tutoriais encontrada

O DOM e a estrutura da árvore DOM

Como acessar, percorrer e modificar nós e elementos no DOM

Use eventos para criar sites interativos e dinâmicos

Cada capítulo é independente e pode ser seguido independentemente dos outros.

DOM, é recomendável ler os capítulos introdutórios

Se você quiser aprender mais sobre JavaScript, visite a seção JavaScript da

Comunidade DigitalOcean . Você pode acompanhar a série How to Code in JavaScript

para uma experiência de aprendizado direcionado.

Escrito por Tânia Rascia

O Document Object Model, geralmente chamado de DOM, é um

essencial para tornar os sites interativos. É uma interface que permite

uma linguagem de programação para manipular o conteúdo, estrutura e estilo de

Um website. JavaScript é a linguagem de script do lado do cliente que se conecta a

um formulário incompleto ou alternando um menu de navegação, é o resultado de

JavaScript acessando e manipulando o DOM. Neste artigo, vamos

aprenda o que é o DOM, como trabalhar com o objeto de documento e o

Observação: embora o DOM seja independente de linguagem ou criado para ser

independente de uma linguagem de programação particular, ao longo deste

recurso no qual focaremos e nos referiremos à implementação do JavaScript do

necessário ter um conhecimento prévio de HTML e CSS. Também é benéfico ter

familiaridade com a sintaxe fundamental do JavaScript e a estrutura do código.

No nível mais básico, um site consiste em um documento HTML. o

<title>Aprendendo o DOM</title> </head>

Esse código é a fonte HTML familiar de um novo esqueleto de site. Isto

com o cabeçalho e o corpo aninhados dentro.

Na guia Elementos, você verá o DOM.

acabamos de escrever — um doctype e algumas outras tags HTML que

nós adicionamos. Passar o mouse sobre cada elemento destacará o respectivo

Os elementos permitem que você alterne a exibição de elementos aninhados.

Objetos em JavaScript se você não se sentir confortável com o conceito de objetos.

Em Developer Tools em index.html, vá para a guia Console. Digite documento no

<title>Aprendendo o DOM</title> </head>

Digitar documento e trabalhar diretamente no console não é

Qual é a diferença entre o DOM e o HTML

O DOM é modificado pelo JavaScript do lado do cliente

O navegador corrige automaticamente erros no código-fonte

document é um objeto, body é uma propriedade desse objeto que acessamos

Modificação em tempo real do DOM

Alternando para a guia Elementos ou digitando document.body no

<body style="background-color: fúcsia;">

Nota: Para alterar a propriedade CSS background-color, nós

O código JavaScript que digitamos, atribuindo fúcsia ao fundo

Para obter informações mais detalhadas sobre o DOM, revise o Documento