Noções básicas sobre o modelo de objeto de documento (DOM) em detalhes

Todos nós já ouvimos falar DOM, ou Modelo de objeto de documento, que é mencionado de tempos em tempos, relacionado ao JavaScript. DOM é um conceito muito importante no desenvolvimento web. Sem isso, não poderíamos modificar dinamicamente as páginas HTML no navegador.

Aprender e entender o DOM resulta em melhores formas de acessando, mudando e monitorando elementos diferentes de uma página HTML. O modelo de objeto de documento também pode nos ajudar reduzir aumentos desnecessários no tempo de execução de scripts.

Árvores de estrutura de dados

Antes de falar sobre o que é o DOM, como ele existe, como ele existe e o que acontece dentro dele, quero que você saiba sobre as árvores. Não o tipo conífera e deciduous mas sobre o árvore de estrutura de dados.

É muito mais fácil compreender o conceito de estruturas de dados se simplificarmos sua definição. Eu diria que uma estrutura de dados é sobre organizando seus dados. Sim, simplesmente arranjo antigo, como você iria organizar os móveis em sua casa ou livros em uma estante ou todos os diferentes grupos de alimentos que você está tendo para uma refeição no seu prato, a fim de torná-lo significativo para você.

Claro, isso não é tudo que existe para uma estrutura de dados, mas é praticamente onde tudo começa. este “arranjo” está no centro disso tudo. É muito importante no DOM também. Mas não estamos falando de DOM ainda, então deixe-me guiá-lo para um estrutura de dados com a qual você pode estar familiarizado: matrizes.

Matrizes e árvores

Matrizes têm índices e comprimento, eles podem ser multidimensional, e tem muitas outras características. Por mais importante que seja conhecer essas coisas sobre arrays, não vamos nos incomodar com isso agora. Para nós, uma matriz é bem simples. É quando você Organize coisas diferentes em uma linha.

Da mesma forma, quando se pensa em árvores, digamos, é sobre colocando as coisas abaixo um do outro, começando com apenas uma coisa no topo.

Agora, você pode pegar os patos de linha única de antes, vire na vertical, e me diga isso “agora, todo pato está debaixo de outro pato”. É uma árvore então? Isto é.

Dependendo de quais são os seus dados ou como você os usará, os dados mais importantes da sua árvore (chamados de raiz) pode ser algo que é De grande importância ou algo que está lá apenas para coloque outros elementos por baixo.

De qualquer maneira, o elemento mais importante em uma estrutura de dados de árvore faz algo muito importante. Ele fornece um lugar para começar a procurar por qualquer informação que queremos extrair da árvore.

O significado do DOM

DOM significa Modelo de objeto de documento. O documento aponta para um documento HTML (XML) qual é representado como um objeto. (Em JavaScript tudo pode ser representado apenas como um objeto!)

O modelo é criado pelo navegador que pega um documento HTML e cria um objeto que o representa. Podemos acessar esse objeto com JavaScript. E como usamos esse objeto para manipular o documento HTML e criar nossos próprios aplicativos, DOM é basicamente um API.

A árvore DOM

No código JavaScript, o documento HTML é representado como um objeto. Todos os dados lidos desse documento são também salvo como objetos, aninhado um sob o outro (porque como eu disse antes, em JavaScript tudo pode ser representado como objetos).

Então, isso é basicamente o arranjo físico dos dados DOM no código: tudo é organizados como objetos. Logicamente, no entanto, é uma árvore.

O analisador DOM

Todo software de navegador tem um programa chamado Analisador de DOM que é responsável por Analisando um documento HTML no DOM.

Os navegadores lêem uma página HTML e transformam seus dados em objetos que compõem o DOM. As informações presentes nesses objetos JavaScript DOM são organizadas logicamente como uma árvore de estrutura de dados conhecida como a árvore DOM.

Analisando dados do HTML para a árvore DOM

Pegue um arquivo HTML simples. Tem o elemento raiz . Está subelementos está e , cada um tem muitos elementos filhos próprios.

Então, essencialmente, o navegador lê os dados no documento HTML, algo parecido com isto:

E, organiza-os em uma árvore DOM como isso:

A representação de cada elemento HTML (e seu conteúdo de pertencimento) na árvore DOM é conhecida como Nó. o nó raiz é o nó de .

o Interface DOM em JavaScript é chamado documento (já que é a representação do documento HTML). Assim, acessamos a árvore DOM de um documento HTML através de documento interface em JavaScript.

Não podemos apenas acessar, mas também manipular o documento HTML através do DOM. Podemos adicionar elementos a uma página da web, removê-los e atualizá-los. Cada vez que alteramos ou atualizamos quaisquer nós na árvore DOM, reflete na página da web.

Como os nós são projetados

Eu mencionei antes que cada pedaço de dados de um documento HTML é salvo como um objeto em JavaScript. Então, como os dados salvos como um objeto podem ser organizados logicamente como uma árvore?

Os nós de uma árvore DOM possuem certas características ou propriedades. Quase todos os nós de uma árvore tem um nó pai (o nó logo acima dele), nós filhos (os nós abaixo) e irmãos (outros nós pertencentes ao mesmo pai). Tendo isto família acima, abaixo e ao redor de um nó é o que o qualifica como parte de uma árvore.

Esta informação familiar de cada nó é salvo como propriedades no objeto representando esse nó. Por exemplo, crianças é uma propriedade de um nó que transporta uma lista dos elementos filho desse nó, organizando logicamente seus elementos filho sob o nó.

Evite exagerar na manipulação de DOM

Por mais que possamos achar a atualização do DOM útil (para modificar uma página da web), existe algo como exagerando.

Diga, você quer atualizar a cor de um

em uma página da web usando JavaScript. O que você precisa fazer é acessando seu objeto de nó DOM correspondente e atualize a propriedade color. Isso não deve afetar o restante da árvore (os outros nós da árvore).

Mas, e se você quiser remover um nó de uma árvore ou adicione um a ele? A árvore inteira pode ter que ser rearranjado, com o nó removido ou adicionado à árvore. Este é um trabalho caro. Leva tempo e recursos do navegador para realizar esse trabalho.

Por exemplo, digamos que você queira adicione cinco linhas extras a uma tabela. Para cada linha, quando seus novos nós são criados e adicionados ao DOM, o árvore é atualizada a cada vez, adicionando até cinco atualizações no total.

Podemos evitar isso usando o DocumentFragment interface. Pense nisso como uma caixa que poderia segure todas as cinco linhas e ser adicionado à árvore. Desta forma, as cinco linhas são adicionado como um único pedaço de dados e não um por um, levando a apenas uma atualização na árvore.

Isso não acontece apenas quando removemos ou adicionamos elementos, mas redimensionando um elemento também pode afetar outros nós, pois o elemento redimensionado pode precisar de outros elementos ajustar seu tamanho. Assim, os nós correspondentes de todos os outros elementos precisarão ser atualizados e os elementos HTML serão renderizados novamente de acordo com as novas regras.

Da mesma forma, quando o layout de uma página da Web como um todo é afetado, uma parte ou toda a página da Web pode ser renderizada novamente. Este é o processo é conhecido como Refluxo. A fim de evite o refluxo excessivo verifique se você não está alterando muito o DOM. Alterações no DOM não são a única coisa que pode causar o refluxo em uma página da web. Dependendo do navegador, outros fatores podem contribuir para isso também.

Empacotando

Embrulhando as coisas, o DOM é visualizado como uma árvore composto de todos os elementos encontrados em um documento HTML. Fisicamente (tão físico quanto qualquer coisa digital pode ser), é um conjunto de objetos JavaScript aninhados das quais propriedades e métodos contêm as informações que tornam possível logicamente organizá-los em uma árvore.