DOM em JavaScript: o que é, como aceder e como modificá-lo

Este artigo pode vir a ser atualizado

Se tiveres perguntas ou observações, deixa um comentário.

Document

O nó document é o ponto de partida: é a partir dele que se chega a todos os elementos do DOM. Corresponde também ao objeto Document, que fornece vários métodos para aceder aos elementos. ( ex.: document.querySelector(‘div.exemple’); )

Elemento

Os elementos HTML descrevem a estrutura de uma página HTML. Para entrar na árvore do DOM, começa por procurar elementos através do Document. Assim que encontrares o elemento que queres, já podes aceder aos seus nós de texto e de atributo.

Atributo

As tags de abertura dos elementos HTML podem conter atributos ( exemplo: id, class, … ), representados por nós de atributo na árvore do DOM. Os nós de atributo não são filhos do elemento que os transporta: fazem parte desse elemento e não podem, por sua vez, ter filhos. Assim que chegas a um elemento, existem métodos e propriedades JavaScript específicos para ler ou alterar os seus atributos.

Texto

Tal como acontece com o nó de atributo, chega-se a um nó de texto através de um nó de elemento e, também como no nó de atributo, os nós de texto não podem ter filhos.

Aceder aos elementos

---

Para alterar um elemento, primeiro é preciso conseguir chegar até ele. Existem para isso vários métodos que permitem navegar pelo DOM e modificá-lo.

Selecionar um elemento

• getElementById() : dá acesso a um elemento através do seu atributo ID.
• querySelector() : devolve um elemento a partir de um seletor CSS.

Selecionar vários elementos

Estes métodos devolvem os elementos sob a forma de uma lista

• getElementsByClassName() : devolve vários elementos a partir de uma classe.
• getElementsByTagName() : devolve vários elementos a partir de uma tag HTML ( ex.: <div> ) .
• querySelectorAll() : devolve vários elementos a partir de um seletor CSS.

Passar de um nó a outro

• parentNode : devolve o elemento pai do elemento atual.
• childNodes : devolve a lista de filhos do elemento atual.
• previousSibling : devolve o nó irmão anterior ao elemento atual.
• nextSibling : devolve o nó irmão seguinte ao elemento atual.
• firstChild : devolve o primeiro elemento filho do elemento atual.
• lastChild : devolve o último elemento filho do elemento atual.

Manipular os atributos

---

Depois de chegares ao teu elemento, tens acesso aos seus atributos e aos seus valores, com vários métodos para os manipular.

id

• id : lê ou define o id do elemento

Classe

• className : lê ou define a classe do elemento.
• classList : devolve uma lista com as classes do elemento
• add : acrescentar uma classe à lista
• remove : retirar uma classe da lista
• toggle : acrescentar/retirar uma classe (alterna: acrescenta-a se não existir, retira-a se existir).
• contains : devolve um booleano verdadeiro se a classe estiver na lista.

Atributos em geral

• hasAttribute() : devolve um booleano verdadeiro se o atributo existir no elemento atual.
• getAttribute() : devolve o valor do atributo indicado.
• setAttribute() : acrescenta ao elemento um atributo e, no segundo argumento, o seu valor.
• removeAttribute() : retira um atributo do elemento.

Aceder aos valores.

• nodeValue : devolve o conteúdo de um nó, num parágrafo devolve o texto, mas se o nó for um atributo devolve o valor do atributo.
• innerText : vai buscar o texto sem ter em conta a marcação.
• innerHTML : vai buscar o texto e também a marcação do nó.
• textContent : devolve o texto como o innerText, e inclui o <script> e o <style>, ao contrário do innerText.

Acrescentar elementos em 3 passos

---

Uma das coisas mais importantes na manipulação do DOM é poder criar novos elementos. Um elemento completo cria-se em 3 passos:

1. createElement() : começas por criar um novo nó de elemento com o método createElement(). Esse nó de elemento é guardado numa variável.
   javascriptCopiar

   var element= document.createElement("p");

2. createTextNode() : o createTextNode() cria um novo nó de texto. Mais uma vez, o nó é guardado numa variável e pode ser acrescentado ao nó de elemento com o método appendChild().
   javascriptCopiar

   var texte = document.createTextNode("Lorem Ipsum");

3. appendChild() : agora que tens o elemento, com ou sem conteúdo num nó de texto, podes acrescentá-lo à árvore do DOM com este método.
   javascriptCopiar

   var element = document.createElement('p');
   var texte = document.createTextNode('Lorem Ipsum');
   element.appendChild(texte);
   document.body.appendChild(element);

O método write

Talvez já tenhas ouvido falar do método document.write para escrever marcação e texto num documento. Só que este método traz muitos inconvenientes e problemas, porque só funciona durante o carregamento inicial da página, depois disso, dá origem a vários efeitos indesejados.

• Apagar a página inteira
• Não acrescentar o conteúdo à página
• Criar uma página nova

Remover um elemento em 3 passos

---

Tal como acrescentamos elementos ao DOM, há também alturas em que é preciso remover um.

1. Para isso, guarda numa variável o elemento que queres remover.
   javascriptCopiar

   var removeElement= document.getElementById('monId');

2. Depois, a partir dessa variável, acede ao elemento pai com a propriedade parentNode .
   javascriptCopiar

   var parentElement = removeElement.parentNode;

3. Com essa segunda variável, já podes remover o elemento que guardaste no primeiro passo.
   javascriptCopiar

   var removeElement= document.getElementById('monId');
   var parentElement = removeElement.parentNode;
   parentElement .removeChild(removeElement);