Resumo: o que é o DOM
- O DOM (Document Object Model) é a representação viva e estruturada de uma página web pelo navegador, sob a forma de uma árvore de objetos que o JavaScript consegue ler e modificar.
- Todos os scripts que a sua página carrega (bundles próprios, tag manager, analytics, chat, ad-tech) têm, por predefinição, acesso total de leitura e escrita ao mesmo DOM. É por isso que um script de terceiros comprometido consegue ler um formulário de início de sessão ou um campo de checkout.
- A segurança client-side monitoriza o que os scripts realmente fazem ao DOM em sessões reais de utilizadores, o único local onde o inventário de scripts do PCI DSS 4.0.1 §6.4.3 e a deteção de adulteração do §11.6.1 podem ser validados de facto.
Ao construir um website, vai encontrar frequentemente o termo DOM - que significa Document Object Model. O DOM é uma interface de programação que representa uma página web como uma árvore estruturada de nós, em que cada nó corresponde a um elemento HTML (como uma tag de título, um parágrafo ou uma ligação). Isto permite o acesso programático para navegar e modificar dinamicamente o conteúdo de uma página.
O que é o DOM?
Quando o navegador carrega o código HTML, percorre-o e constrói uma árvore de objetos formada pelos elementos da página. O elemento no topo seria a raiz da árvore, e por baixo desse encontraria os nós e , e dentro destes os respetivos objetos-filho. O DOM é uma API padronizada para conteúdo HTML. Se um programa precisar de atualizar o conteúdo da sua página, é com o DOM que interage.
O próprio DOM é neutro em termos de linguagem. Não faz parte do JavaScript, mas o JavaScript acaba por ser a melhor forma de interagir com ele.
Veja isto no seu próprio site
Se se preocupa com o que realmente é executado no navegador (e não apenas com o que o seu servidor enviou), precisa de visibilidade sobre cada mutação do DOM que os seus scripts de terceiros realizam. O cside monitoriza o comportamento de scripts client-side em todas as sessões de visitantes, em tempo real. O plano gratuito cobre o essencial.
O DOM nos bastidores
Quando um navegador carrega um website, o HTML é analisado e transformado numa árvore DOM, e o CSS é transformado no CSSOM (CSS Object Model), que representa todas as regras de estilo dos seus objetos. Depois de concluído, o navegador combina o DOM e o CSSOM para determinar o aspeto dos nós, onde devem aparecer, e a sua posição e dimensão exatas.
O DOM é uma estrutura viva e dinâmica, pelo que o JavaScript e outro código podem alterar nós depois de a página carregar. O site atualiza-se instantaneamente, sem necessidade de recarregar.
Interagir com o DOM
O navegador expõe o DOM através do objeto `document`, que o JavaScript pode depois utilizar para interagir com ele. Usando a API do DOM, é possível realizar uma variedade de ações para tornar uma página estática mais dinâmica e interativa. Algumas incluem:
- Selecionar elementos através de `document.getElementById`, que devolve o botão ou elemento correspondente a esse ID
- Ler ou modificar o conteúdo de uma página alterando `element.textContent` ou `element.innerHTML`
- Aplicar ou alterar dinamicamente o CSS de um elemento, mudando as propriedades de estilo (por exemplo, fazendo `element.style.backgroundColor = “yellow”` para tornar algo amarelo)
- Adicionar ou remover elementos numa página através de `document.createElement` ou `element.removeChild`
Porque é que o DOM é importante
Sem o DOM, os websites dinâmicos não seriam possíveis. Ele permite que tudo, desde um simples script até uma aplicação complexa, leia e altere o conteúdo da página, sendo a principal interface entre o HTML e o JavaScript.
