Modelo de Objeto de Documento

O Document Object Model (DOM) é uma plataforma cruzada e uma interface independente de linguagem que trata um documento XML ou HTML como uma estrutura de árvore em que cada nó é um objeto que representa uma parte do documento. O DOM representa um documento com uma árvore lógica. Cada ramificação da árvore termina em um nó e cada nó contém objetos. Os métodos DOM permitem acesso programático à árvore; com eles pode-se mudar a estrutura, estilo ou conteúdo de um documento. Os nós podem ter manipuladores de eventos anexados a eles. Depois que um evento é acionado, os manipuladores de eventos são executados.

A principal padronização do DOM foi realizada pelo World Wide Web Consortium (W3C), que desenvolveu uma recomendação pela última vez em 2004. WHATWG assumiu o desenvolvimento do padrão, publicando-o como um documento vivo. O W3C agora publica instantâneos estáveis do padrão WHATWG.

No HTML DOM (Document Object Model), cada elemento é um nó:

• Um documento é um nó de documento.
• Todos os elementos HTML são nós de elementos.
• Todos os atributos HTML são nós de atributos.
• Texto inserido em elementos HTML são nós de texto.
• Comentários são nós de comentários.

História

A história do Document Object Model está entrelaçada com a história da "guerra dos navegadores" do final dos anos 1990 entre o Netscape Navigator e o Microsoft Internet Explorer, bem como com o JavaScript e o JScript, as primeiras linguagens de script a serem amplamente implementadas nos mecanismos JavaScript dos navegadores da web.

JavaScript foi lançado pela Netscape Communications em 1995 dentro do Netscape Navigator 2.0. A concorrente do Netscape, a Microsoft, lançou o Internet Explorer 3.0 no ano seguinte com uma reimplementação do JavaScript chamada JScript. JavaScript e JScript permitem que os desenvolvedores da Web criem páginas da Web com interatividade do lado do cliente. As facilidades limitadas para detectar eventos gerados pelo usuário e modificar o documento HTML na primeira geração dessas linguagens acabaram se tornando conhecidas como "DOM Nível 0" ou "Legacy DOM." Nenhum padrão independente foi desenvolvido para DOM Nível 0, mas foi parcialmente descrito nas especificações do HTML 4.

O Legacy DOM era limitado nos tipos de elementos que podiam ser acessados. Elementos de formulário, link e imagem podem ser referenciados com um nome hierárquico que começa com o objeto do documento raiz. Um nome hierárquico pode fazer uso dos nomes ou do índice sequencial dos elementos percorridos. Por exemplo, um elemento de entrada de formulário pode ser acessado como document.formName.inputName ou document.forms[0].elements[0].

O Legacy DOM permitia validação de formulário do lado do cliente e interatividade de interface simples, como a criação de dicas de ferramentas.

Em 1997, a Netscape e a Microsoft lançaram a versão 4.0 do Netscape Navigator e do Internet Explorer, respectivamente, adicionando suporte para a funcionalidade Dynamic HTML (DHTML), permitindo alterações em um documento HTML carregado. O DHTML exigia extensões para o objeto de documento rudimentar que estava disponível nas implementações do Legacy DOM. Embora as implementações Legacy DOM fossem amplamente compatíveis, já que o JScript era baseado em JavaScript, as extensões DHTML DOM foram desenvolvidas em paralelo por cada fabricante de navegador e permaneceram incompatíveis. Essas versões do DOM ficaram conhecidas como "Intermediate DOM".

Após a padronização do ECMAScript, o W3C DOM Working Group começou a esboçar uma especificação DOM padrão. A especificação completa, conhecida como "DOM Nível 1", tornou-se uma Recomendação W3C no final de 1998. Em 2005, grandes partes do W3C DOM eram bem suportadas por navegadores comuns habilitados para ECMAScript, incluindo Internet Explorer 6 (de 2001), Opera, Safari e navegadores baseados em Gecko (como Mozilla, Firefox, SeaMonkey e Camino).

Padrões

O que foi?

O W3C DOM Working Group publicou sua recomendação final e posteriormente se desfez em 2004. Os esforços de desenvolvimento migraram para o WHATWG, que continua a manter um padrão de vida. Em 2009, o grupo Web Applications reorganizou as atividades de DOM no W3C. Em 2013, devido à falta de progresso e ao lançamento iminente do HTML5, a especificação DOM Nível 4 foi reatribuída ao HTML Working Group para acelerar sua conclusão. Enquanto isso, em 2015, o grupo Web Applications foi dissolvido e a administração do DOM passou para o grupo Web Platform. Começando com a publicação do DOM Nível 4 em 2015, o W3C cria novas recomendações com base em instantâneos do padrão WHATWG.

• DOM O nível 1 forneceu um modelo completo para todo um documento HTML ou XML, incluindo os meios para alterar qualquer parte do documento.
• DOM Nível 2 foi publicado no final de 2000. Introduziu o getElementById função, bem como um modelo de evento e suporte para namespaces XML e CSS.
• DOM Nível 3, publicado em abril de 2004, adicionou suporte para XPath e manipulação de eventos de teclado, bem como uma interface para serializar documentos como XML.
• DOM Nível 4 foi publicado em 2015. É um instantâneo do padrão de vida WhatWG.

Aplicativos

Navegadores da Web

Para renderizar um documento como uma página HTML, a maioria dos navegadores da Web usa um modelo interno semelhante ao DOM. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM, com o nó superior denominado "Objeto de documento". Quando uma página HTML é renderizada em navegadores, o navegador baixa o HTML na memória local e o analisa automaticamente para exibir a página na tela. No entanto, o DOM não precisa necessariamente ser representado como uma árvore e alguns navegadores usam outros modelos internos.

JavaScript

Quando uma página da Web é carregada, o navegador cria um Document Object Model da página, que é uma representação orientada a objetos de um documento HTML que atua como uma interface entre o JavaScript e o próprio documento. Isso permite a criação de páginas web dinâmicas, pois dentro de uma página o JavaScript pode:

• adicionar, alterar e remover qualquer um dos elementos e atributos HTML
• mudar qualquer um dos estilos CSS
• reagir a todos os eventos existentes
• criar novos eventos

Estrutura da árvore DOM

Uma árvore Document Object Model (DOM) é uma representação hierárquica de um documento HTML ou XML. Consiste em um nó raiz, que é o próprio documento, e uma série de nós filhos que representam os elementos, atributos e conteúdo de texto do documento. Cada nó na árvore tem um nó pai, exceto o nó raiz, e pode ter vários nós filhos.

Elementos como nós

Os elementos em um documento HTML ou XML são representados como nós na árvore DOM. Cada nó de elemento tem um nome de marca, atributos e pode conter outros nós de elemento ou nós de texto como filhos. Por exemplo, um documento HTML com a seguinte estrutura:

<html> <cabeça> <título>O meu site</título> </cabeça> <corpo> <H1>Bem-vindo</H1> <p>Este é o meu site.</p> </corpo></html>

será representado na árvore DOM como:

- Documento (raiz)
- html
- Cabeça
- título
- "Meu site"
- corpo
- H1
- "Bem-vindo"
- P
- "Este é o meu site."

Nós de texto

O conteúdo de texto dentro de um elemento é representado como um nó de texto na árvore DOM. Os nós de texto não possuem atributos ou nós filhos e são sempre nós de folha na árvore. Por exemplo, o conteúdo de texto "Meu site" no elemento de título e "Bem-vindo" no elemento h1 no exemplo acima são ambos representados como nós de texto.

Atributos como propriedades

Os atributos de um elemento são representados como propriedades do nó do elemento na árvore DOM. Por exemplo, um elemento com o seguinte HTML:

<um Href= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="https://example.com">Link</um>

será representado na árvore DOM como:

- um
- href: "https://example.com"
- "Link"

Manipulando a árvore DOM

A árvore DOM pode ser manipulada usando JavaScript ou outras linguagens de programação. Tarefas comuns incluem navegar na árvore, adicionar, remover e modificar nós e obter e definir as propriedades dos nós. A API DOM fornece um conjunto de métodos e propriedades para executar essas operações, como getElementById, createElement, appendChild e innerHTML.

// Criar o elemento raizvar raiz raiz = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = documento.criar Elemento("raiz");// Criar um elemento de criançavar criança = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = documento.criar Elemento("criança");// Adicione o elemento da criança ao elemento raizraiz raiz.Adicionar ao cesto(criança);

Outra forma de criar uma estrutura DOM é usando a propriedade innerHTML para inserir o código HTML como uma string, criando os elementos e filhos no processo. Por exemplo:

documento.O que é isso?("raiz").internoHTML = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = "";

Outro método é usar uma biblioteca ou estrutura JavaScript como jQuery, AngularJS, React, Vue.js, etc. Essas bibliotecas fornecem uma maneira mais conveniente e eficiente de criar, manipular e interagir com o DOM.

Também é possível criar uma estrutura DOM a partir de dados XML ou JSON, usando métodos JavaScript para analisar os dados e criar os nós de acordo.

É importante observar que a criação de uma estrutura DOM não significa necessariamente que ela será exibida na página da Web, ela existe apenas na memória e deve ser anexada ao corpo do documento ou a um contêiner específico a ser renderizado.

Em resumo, criar uma estrutura DOM envolve criar nós individuais e organizá-los em uma estrutura hierárquica usando JavaScript ou outras linguagens de programação, e pode ser feito usando vários métodos, dependendo do caso de uso e da preferência do desenvolvedor.

Implementações

Como o DOM suporta navegação em qualquer direção (por exemplo, pai e irmão anterior) e permite modificações arbitrárias, uma implementação deve pelo menos armazenar em buffer o documento que foi lido até agora (ou alguma forma analisada dele).

Mecanismos de layout

Navegadores da Web dependem de mecanismos de layout para analisar o HTML em um DOM. Alguns mecanismos de layout, como Trident/MSHTML, são associados principal ou exclusivamente a um navegador específico, como o Internet Explorer. Outros, incluindo Blink, WebKit e Gecko, são compartilhados por vários navegadores, como Google Chrome, Opera, Safari e Firefox. Os diferentes mecanismos de layout implementam os padrões DOM em vários graus de conformidade.

Bibliotecas

Implementações DOM:

• libxml2
• MSXML
• Xerces é uma coleção de implementações DOM escritas em C++, Java e Perl
• xml.dom para Python
• XML para é uma implementação DOM baseada em JavaScript
• PHP. Gt DOM é uma implementação DOM de lado servidor com base no libxml2 e traz compatibilidade de nível 4 DOM para a linguagem de programação PHP
• Domino é uma implementação DOM do lado do servidor (Node.js) baseada no dom.js da Mozilla. Domino é usado na pilha MediaWiki com Editor Visual.
• Simples. HtmlDom é um modelo de objeto de documento HTML simples em C#, que pode gerar string HTML de forma programática.

APIs que expõem implementações DOM:

• JAXP (Java API for XML Processing) é uma API para acessar provedores DOM
• Lázaro (Free Pascal IDE) contém duas variantes do DOM - com formato UTF-8 e ANSI

Ferramentas de inspeção:

• DOM Inspetor é uma ferramenta de desenvolvedor web