Introdução ao DOM

Qualquer que seja a ação que executamos em uma página da Web HTML, como alterar um elemento, alterar os atributos de um elemento ou alterar o estilo de um elemento usando uma linguagem de script, é executado com a ajuda do DOM. Isso ocorre porque a linguagem de script não pode acessar o elemento HTML por conta própria, por isso requer uma interface do meio que vincule a linguagem de script ao elemento HTML.

DOM pode ser chamado de estrutura do documento em que o documento pode ser uma página da web html ou uma página XML. Neste post, vamos saber o que é DOM, como trabalhar com os visualizadores do DOM ao vivo e como acessar elementos com uma linguagem de script.

O que é dom?

DOM significa Modelo de Objeto de Documento e é considerado um padrão para acessar, alterar e excluir elementos do documento. Este padrão é definido pelo W3C (World Wide Web Consortium) E é por isso que Dom é mais comumente chamado de W3C DOM. O World Wide Web Consortium definiu DOM como uma interface que ajuda os idiomas a interagir com um documento enquanto permanecem neutra em linguagem.

O Documento Em DOM significa um documento que pode ser um documento HTML ou um documento XML. O Objeto no DOM é usado para se referir a elementos ou nós do documento. Enquanto o Modelo no DOM refere -se à estrutura (ou árvore) do documento.

Além disso, o DOM age como uma interface de aplicativo (API) para a linguagem de script para alterar os elementos do documento HTML

A estrutura do documento é um pouco como uma árvore. Ele contém o nó pai e os nós filhos.

Trabalhando com visualizadores de DOM ao vivo

Alguns sites nos fornecem geradores DOM ao vivo, um desses visualizadores de DOM ao vivo é fornecido no Codepen.io. Considere, os seguintes elementos dentro da página da web html:

Google	Bing
John Doe, Ruski	Califórnia

Para gerar a hierarquia DOM usando o código JavaScript na caneta Code, copie e cole esses elementos HTML dentro do Viewer DOM no Codepen.io

Abaixo desta guia HTML sobre “Codepen”, Você poderá ver a hierarquia do DOM como:

Você pode ver claramente os nós pais, nós filhos e nós de irmãos com base em seu recuo na estrutura

Acessando elementos HTML com JavaScript

O JavaScript fornece vários métodos para vincular os elementos em uma página da web html, interagindo com o DOM. Esses métodos são a saber:

• getElementById ()
• getElementByclassName ()
• getElementByName ()
• getElementByTagName ()
• getElementByTagns ()

Para demonstrar isso, crie uma página HTML com as seguintes linhas:

Eu sou uma tag P no DOM

Adicione o link ao arquivo de script usando a seguinte linha:

Dentro do arquivo de script, adicione as seguintes linhas de código para alterar a cor de fundo deste t tag:

var ptag = documento.getElementById ("Demo");
ptag.estilo.AntecedentesColor = "Amarelo";

Você receberá o seguinte resultado no navegador:

Lá vai você, você mudou o estilo de um elemento usando a linguagem de script.

Conclusão

O DOM é definido como um padrão pelo W3C (World Wide Web Consortium) como uma interface para a linguagem de script para interagir com os elementos do documento (html ou xml). A linguagem de script (por exemplo, JavaScript) não pode acessar diretamente os elementos da página da web. Portanto, ele interage com o DOM e o DOM age como uma API e realiza mudanças nos elementos da página da web html. A estrutura DOM é como uma árvore, tendo nós pais, nós filhos e nós irmãos.