1

DOM - Parte 1

#JavaScript
Paulo Alexandre
Paulo Alexandre

O Document Object Model é uma representação de objeto dos elementos html de uma página da web. Ele nos dá uma interface com a qual podemos interagir e manipular a página, alterando a estrutura, o conteúdo e o estilo do documento. O modelo de objeto é uma estrutura de árvore com cada elemento DOM sendo, portanto, um nó de árvore, contendo todas as mesmas chaves de propriedade que cada outro nó. Algumas dessas propriedades do nó são informativas, enquanto outras são métodos que podemos usar para interação. O DOM, criando e propagando objetos de evento, que contêm informações sobre o tipo de evento e o destino, na árvore.


Visão Global

Quando uma página da web é carregada em um navegador, o navegador primeiro procura o arquivo HTML. O navegador usa o arquivo HTML como um plano ou instruções sobre como construir a página (isso junto com o arquivo CSS posteriormente). O navegador analisa essas instruções e constrói um modelo de como a página deve se parecer e agir usando Javascript. Este modelo é um objeto Javascript que contém todos os elementos em ordem na página. Este objeto é conhecido como DOM, ou Document Object Model.


O DOM é construído como uma estrutura de dados conhecida como ‘Árvore’, porque os elementos pais têm elementos filhos aninhados (ou folhas). Como acontece com as árvores físicas, podemos seguir os galhos da árvore para chegar à folha (ou folhas) exata que desejamos acessar. Cada ramo de nossa árvore DOM pode ser sua própria árvore. É importante lembrar disso à medida que avançamos:


JavaScript HTML DOM



Quando o DOM é construído e a página da web carregada, os desenvolvedores obtêm acesso a ele na forma de um documento global de objeto Javascript. documento contém toda a hierarquia da página, cada elemento (ou nó DOM) e também contém dezenas de métodos e propriedades integrados. Podemos usar esses métodos e propriedades para manipular o que vemos na tela.


Investigando o DOM

Vamos investigar o DOM juntos, visitando um site ativo e atualizando o DOM. Siga estas etapas em ordem:


Pré-requisito: Este tutorial assume que você está usando o Google Chrome. Você pode obter resultados semelhantes em qualquer outro navegador, mas essas etapas foram adaptadas para uma experiência do Chrome.


Navegue até o site escolhido.

Clique com o botão direito do mouse no título principal e você verá um menu suspenso com a opção de inspecionar o elemento. Clique nessa opção e as ferramentas de desenvolvedor do Chrome devem ser ativadas.

As ferramentas do desenvolvedor devem mostrar a seleção que você fez ao clicar com o botão direito. Clique duas vezes no conteúdo do título. Agora você deve conseguir editar o texto do cabeçalho.


Atualize o texto com o que você quiser. Para este exemplo, atualizarei o texto para dizer “Olá!” Você não verá nenhuma alteração até desmarcar o conteúdo nas ferramentas de desenvolvedor do Chrome. Agora tente atualizar o conteúdo e o HTML de outros elementos da página.


Observe que se você atualizar a página, as alterações feitas desaparecerão! Isso ocorre porque os elementos que você estava editando existiam no DOM e não eram permanentes!


Agora você tem experiência em editar o DOM sem escrever código.


Cavando mais fundo:

Uma ferramenta bem legal para testar isso: https://software.hixie.ch/utilities/js/live-dom-viewer/


Eloquent Javascript: DOM - JavaScript Eloquent


MDN - Official documentation


Continua...

0
30

Comentários (0)

Front End Developer

Estados Unidos