Entenda o DOM de uma vez por todas - 1 Introdução
Olá, este poste é o inicio de uma série de postes com um único objecto: "Te ajudar de uma vez por todas à entender o DOM usando javascript". Então bem-vindo a primeira parte:
Introdução ao DOM
O Document Object Model , geralmente chamado de DOM , é uma parte essencial para tornar os sites interativos. É uma interface que permite que uma linguagem de programação manipule o conteúdo, estrutura e estilo de um site. JavaScript é a linguagem de script do lado do cliente que se conecta ao DOM em um navegador da Internet.
Quase sempre que um site realiza uma ação, como alternar entre uma apresentação de slides de imagens, exibir um erro quando um usuário tenta enviar um formulário incompleto ou alternar um menu de navegação, ele é o resultado do JavaScript acessando e manipulando o DOM. Neste artigo, aprenderemos o que é o DOM, como trabalhar com o documentobjeto e a diferença entre o código-fonte HTML e o DOM.
Quase sempre que um site realiza uma ação, como alternar entre uma apresentação de slides de imagens, exibir um erro quando um usuário tenta enviar um formulário incompleto ou alternar um menu de navegação, ele é o resultado do JavaScript acessando e manipulando o DOM. Neste artigo, aprenderemos o que é o DOM, como trabalhar com o documentobjeto e a diferença entre o código-fonte HTML e o DOM.
Nota:
Embora o DOM seja independente de idioma, ou criado para ser independente de uma linguagem de programação específica, ao longo deste recurso, nos concentraremos e nos referiremos à implementação do JavaScript do HTML DOM.
O que eu preciso?
Para entender efetivamente o DOM e como ele se relaciona com o trabalho com a Web, é necessário ter um conhecimento existente de HTML e CSS . Também é benéfico ter familiaridade com a sintaxe e a estrutura de código fundamentais do JavaScript.O que é o DOM?
No nível mais básico, um site consiste em um documento HTML. O navegador que você usa para visualizar o site é um programa que interpreta HTML e CSS e renderiza o estilo, conteúdo e estrutura na 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 conhecido 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 muito básico. Crie um index.htmlarquivo e salve-o em um novo diretório de projeto.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Entendendo o DOM</title>
</head>
<body>
<h1>Document Object
Model (DOM)</h1>
</body>
</html>Para nossos objetivos, usaremos o navegador Google Chrome, mas você poderá receber resultados semelhantes de outros navegadores modernos. No Chrome, abra-se index.html. Você verá um site simples com nosso título dizendo "Document Object Model (DOM)". Clique com o botão direito em qualquer lugar da página e selecione "Inspecionar". Isso abrirá as Ferramentas do desenvolvedor.
Na guia Elements , você verá o DOM.
Nesse caso, quando expandido, parece exatamente o mesmo que o código-fonte HTML que acabamos de escrever - um tipo de documento e as poucas outras tags HTML que adicionamos. Passar o mouse sobre cada elemento destacará o respectivo elemento no site renderizado. Pequenas setas à esquerda dos elementos HTML permitem alternar a exibição de elementos aninhados.
O document object
O document oject é 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.Em Developer Tools no index.html , vá para a guia Console . Digite
document no console e pressione ENTER. Você verá que o resultado é o mesmo que você vê na guia Elements.
> document;
Saída
#document
<!DOCTYPE html>
<html lang="en">
<head>
<title>Entendendo o DOM</title>
</head>
<body>
<h1>Document Object
Model (DOM)</h1>
</body>
</html>Digitar document e trabalhar diretamente no console não é algo que você geralmente fará fora da depuração, mas ajuda a solidificar exatamente o que o document object é e como modificá-lo, como descobriremos a seguir.
Qual é a diferença entre o código-fonte DOM e HTML?
Atualmente, com este exemplo, parece que o código-fonte HTML e o DOM são exatamente a mesma coisa. Existem 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
document.body;
O console responderá com esta saída:
Saída
<body>
<h1>Document Object Model (DOM)</h1>
</body>Document é um objeto, body é uma propriedade desse objeto que acessamos com notação de ponto. O envio document.body para o console gera o elemento body e tudo dentro dele.No console, podemos alterar algumas das propriedades ativas do objeto body neste site. Vamos editar o atributo style, mudando a cor de fundo para blue. Digite isso no console:
document.body.style.backgroundColor = 'blue';
Depois de digitar e enviar o código acima, você verá a atualização ao vivo para o site, conforme a cor do plano de fundo é alterada.
Saída
<body style="background-color: blue;">
<h1>Document Object Model (DOM)</h1>
</body>
Nota: Para alterar a propriedade background-color CSS, tivemos que digitar o JavaScript
backgroundColor. Qualquer propriedade CSS hifenizada será escrita em camelCase em JavaScript
O código JavaScript que digitamos, atribuindo à cor azul como fundo do body, é agora uma parte do DOM.
No entanto, clique com o botão direito do mouse na página e selecione "Ver fonte da página". Você notará que a fonte do site não contém o novo atributo de estilo que adicionamos via JavaScript. O código-fonte ou de origem de um site não será alterada 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 em que o DOM pode ter uma saída diferente do código-fonte HTML é quando há erros no código-fonte. Um exemplo comum disso é a tag table – uma tag tbody é necessária dentro de um table, mas os desenvolvedores geralmente não a incluem 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 fechadas.
O que aprendemos?
Nesta parte, definimos o DOM, acessamos o objeto document, usamos JavaScript e o console para atualizar uma propriedade do objeto document e examinamos a diferença entre o código-fonte HTML e o DOM.No próximo artigo, revisaremos a terminologia HTML importante, aprenderemos sobre a árvore DOM, descobriremos o que são nós, aprenderemos sobre os tipos mais comuns de nós e começaremos a criar scripts interativos com JavaScript.
Fique atento ao proximo artigo desta série!
Forte abraço.
