O HTML DOM (Document Object Model) é uma representação em memória de um documento HTML, que permite o acesso e a manipulação dos elementos desse documento por meio de scripts. Ele fornece uma maneira estruturada de interagir com os elementos HTML, permitindo que os desenvolvedores acessem, modifiquem e atualizem o conteúdo e a aparência de uma página da web dinamicamente.

O que é o HTML DOM?

O HTML DOM é uma interface de programação de aplicativos (API) que representa a estrutura de um documento HTML como uma árvore de objetos. Cada elemento HTML é representado por um objeto no DOM, e esses objetos podem ser acessados e manipulados por meio de scripts. O DOM permite que os desenvolvedores acessem e modifiquem os elementos, atributos e estilos de uma página da web, tornando possível a criação de páginas interativas e dinâmicas.

Como funciona o HTML DOM?

O HTML DOM funciona criando uma representação em memória de um documento HTML. Quando um navegador carrega uma página da web, ele analisa o código HTML e cria uma árvore de objetos DOM com base nesse código. Cada elemento HTML é representado por um objeto no DOM, e esses objetos são organizados em uma hierarquia, onde os elementos pai têm filhos e os elementos filhos têm pais.

Por exemplo, considere o seguinte código HTML:

“`

Título da página

Este é um parágrafo.

“`

Quando esse código é analisado pelo navegador, o DOM é criado da seguinte forma:

“`
– Document (objeto raiz)
– html (elemento raiz)
– head
– title
– “Exemplo de página”
– body
– h1
– “Título da página”
– p
– “Este é um parágrafo.”
“`

Manipulando o HTML DOM

Uma das principais vantagens do HTML DOM é a capacidade de manipular os elementos de uma página da web por meio de scripts. Os desenvolvedores podem acessar e modificar os elementos, atributos e estilos de uma página, permitindo que eles criem páginas interativas e dinâmicas.

Existem várias maneiras de manipular o HTML DOM. Uma delas é usar métodos e propriedades fornecidos pelo DOM para acessar e modificar os elementos. Por exemplo, para alterar o conteúdo de um elemento, podemos usar a propriedade `innerHTML`. Para alterar o valor de um atributo, podemos usar a propriedade `setAttribute`. E para adicionar ou remover classes de um elemento, podemos usar as propriedades `classList.add` e `classList.remove`.

Acessando elementos do HTML DOM

Para acessar elementos do HTML DOM, podemos usar métodos como `getElementById`, `getElementsByClassName` e `getElementsByTagName`. Esses métodos retornam uma coleção de elementos que correspondem aos critérios de pesquisa especificados.

Por exemplo, para acessar um elemento pelo seu ID, podemos usar o método `getElementById`:

“`javascript
var elemento = document.getElementById(“meuElemento”);
“`

Para acessar elementos por sua classe, podemos usar o método `getElementsByClassName`:

“`javascript
var elementos = document.getElementsByClassName(“minhaClasse”);
“`

E para acessar elementos por sua tag, podemos usar o método `getElementsByTagName`:

“`javascript
var elementos = document.getElementsByTagName(“p”);
“`

Manipulando estilos com o HTML DOM

O HTML DOM também permite a manipulação dos estilos de um elemento. Podemos acessar e modificar as propriedades de estilo de um elemento por meio da propriedade `style`. Por exemplo, para alterar a cor de fundo de um elemento, podemos fazer o seguinte:

“`javascript
elemento.style.backgroundColor = “red”;
“`

Também é possível adicionar e remover classes de um elemento para alterar seu estilo. Podemos usar as propriedades `classList.add` e `classList.remove` para isso. Por exemplo, para adicionar uma classe a um elemento, podemos fazer o seguinte:

“`javascript
elemento.classList.add(“minhaClasse”);
“`

Manipulando eventos com o HTML DOM

O HTML DOM também permite a manipulação de eventos em uma página da web. Podemos adicionar ou remover manipuladores de eventos para responder a ações do usuário, como cliques, movimentos do mouse e pressionamentos de tecla.

Para adicionar um manipulador de eventos a um elemento, podemos usar o método `addEventListener`. Por exemplo, para adicionar um manipulador de eventos de clique a um botão, podemos fazer o seguinte:

“`javascript
elemento.addEventListener(“click”, function() {
// código a ser executado quando o botão for clicado
});
“`

Também é possível remover um manipulador de eventos usando o método `removeEventListener`. Por exemplo, para remover um manipulador de eventos de clique de um botão, podemos fazer o seguinte:

“`javascript
elemento.removeEventListener(“click”, função);
“`

Trabalhando com elementos pai e filhos

O HTML DOM permite que os desenvolvedores acessem os elementos pai e filhos de um elemento. Podemos usar as propriedades `parentNode` e `childNodes` para isso.

Por exemplo, para acessar o elemento pai de um elemento, podemos fazer o seguinte:

“`javascript
var pai = elemento.parentNode;
“`

E para acessar os elementos filhos de um elemento, podemos fazer o seguinte:

“`javascript
var filhos = elemento.childNodes;
“`

Trabalhando com elementos irmãos

O HTML DOM também permite que os desenvolvedores acessem os elementos irmãos de um elemento. Podemos usar as propriedades `previousSibling` e `nextSibling` para isso.

Por exemplo, para acessar o elemento irmão anterior de um elemento, podemos fazer o seguinte:

“`javascript
var irmãoAnterior = elemento.previousSibling;
“`

E para acessar o próximo elemento irmão de um elemento, podemos fazer o seguinte:

“`javascript
var próximoIrmão = elemento.nextSibling;
“`

Trabalhando com atributos

O HTML DOM também permite que os desenvolvedores acessem e modifiquem os atributos de um elemento. Podemos usar as propriedades `getAttribute` e `setAttribute` para isso.

Por exemplo, para acessar o valor de um atributo, podemos fazer o seguinte:

“`javascript
var valor = elemento.getAttribute(“nomeDoAtributo”);
“`

E para definir o valor de um atributo, podemos fazer o seguinte:

“`javascript
elemento.setAttribute(“nomeDoAtributo”, valor);
“`

Trabalhando com classes

O HTML DOM também permite que os desenvolvedores acessem e modifiquem as classes de um elemento. Podemos usar as propriedades `classList.add`, `classList.remove` e `classList.toggle` para isso.

Por exemplo, para adicionar uma classe a um elemento, podemos fazer o seguinte:

“`javascript
elemento.classList.add(“minhaClasse”);
“`

E para remover uma classe de um elemento, podemos fazer o seguinte:

“`javascript
elemento.classList.remove(“minhaClasse”);
“`

Também é possível alternar uma classe em um elemento usando o método `toggle`. Por exemplo, para alternar uma classe chamada “ativo” em um elemento, podemos fazer o seguinte:

“`javascript
elemento.classList.toggle(“ativo”);
“`

Conclusão

O HTML DOM é uma poderosa ferramenta que permite aos desenvolvedores acessar e manipular os elementos de uma página da web por meio de scripts. Ele fornece uma maneira estruturada de interagir com os elementos HTML, permitindo a criação de páginas interativas e dinâmicas. Com o HTML DOM, os desenvolvedores podem acessar e modificar os elementos, atributos e estilos de uma página, bem como adicionar e remover classes e manipular eventos. É uma parte essencial do desenvolvimento web e um conhecimento fundamental para qualquer desenvolvedor front-end.