DOM - Document Object Model O que você precisa saber sobre o DOM (Document Object Model)

(1)

DOM - Document Object Model

O que você precisa saber sobre o DOM (Document Object Model)

DOM é um acrônimo para Document Object Model (Modelo de Objetos de Documento)

ele representa os objetos de uma página HTML em forma de uma árvore. O DOM é importante pois é através dele que acessamos os elementos dentro de uma página HTML.

Em outras palavras, obtemos acesso ao documento HTML através do DOM.

Selecionando elementos através dos seletores CSS

O padrão da W3C conhecido como API de Seletores define métodos JavaScript para obter os elementos que coincidem com determinado seletor CSS. O segredo dessa API é o método querySelectorAll(), ele recebe um argumento de string contendo um seletor CSS e retorna um objeto NodeList representando todos os elementos do documento que correspondem ao seletor.

Navegando pela árvore DOM

Os métodos para encontrar elementos DOM que descrevemos até aqui foram muito direcionados, estamos pulando diretamente para um nó específico na árvore, sem nos

(2)

preocuparmos com as conexões no meio. Após ter selecionado um elemento do documento, às vezes você precisa encontrar partes estruturalmente relacionada:

 parent (pais)

 siblings (irmãos)

 childrens (filhos)

Localizando um pai (parent)

Todo nó de elemento possui um pai, exceto o nó do documento. Consequentemente, cada nó de elemento tem uma propriedade chamada parentNode, uma referência para o pai do elemento distinto.

elem.parentNode

Localizando filhos (childrens)

Um elemento só pode ter um pai (parent), mas pode ter muitos filhos (childrens). Você pode encontrar todos os filhos de um elemento, usando a propriedade childNodes. Ela é, na verdade, uma lista de nós que contém todos os filhos do elemento, na ordem de origem.

elem.childNodes // lista completa de filhos elem.childNodes[0] //

elem.childNodes[1] // Acessando filhos individualmente elem.childNodes[2] //

(3)

//etc...

Podemos também localizar o primeiro filho:

elem.firstChild

Ou o último filho:

elem.lastChild

Localizando irmãos (siblings)

Assim como podemos navegar para cima e para baixo na árvore DOM, também podemos ir de um lado para o outro, obtendo o próximo nó ou o anterior (ambos no mesmo nível).

As propriedades que utilizamos para isso são nextSibling e previousSibling.

var proximoIrmao = elem.nextSibling var anteriorIrmao = elem.previousSibling

Acessando os atributos

Os elementos HTML consistem em um nome de tag e um conjunto de pares nome/valor conhecidos como atributos. Por exemplo, o elemento <a> que define um hiperlink utiliza o valor de seu atributo href como destino do link.

<a href="www.defuria.com.br" id="um-link-qualquer">link</a>"

Os valores de atributo dos elementos HTML estão disponíveis como propriedades dos objetos HTMLElement que representam esses elementos. Dessa forma

var link = document.getElementById("um-link-qualquer");

console.log(link.href);

(4)

O DOM também oferece outras API’s para obter e configurar os valores de atributos HTML não padronizados, mas que também funcionam com os demais atributos.

var link = document.getElementById("um-link-qualquer");

link.setAtributte("href", "http://www.w3.org/") console.log(link.getAtributte("href"));

Resumo

 elem.[nome do atributo] para leitura e escrita

 elem.getElementById("nome do atributo") para leitura

 elem.setAtributte("nome do atributo", "valor do atributo") para escrita

Manipulando o DOM

Podemos criar, inserir e excluir elementos da árvore DOM.

A função document.createElement() aceita como parâmetro o nome da tag e retorna o elemento recém criado (mas ainda não inserido).

var elem = document.createElement("li");

Inserimos o elemento com a função elemento_pai.appendChild(), mas ainda precisamos criar um nó de texto para o elemento, caso contrário, estaremos inserindo apenas o elemento, sem texto. Para criar um nó de texto utilizamos a função document.createTextNode().

var texto = document.createTextNode("mais um item");

Antes de inserir o elemento, devemos anexar o nó de texto a ele.

elem.appendChild(texto);

(5)

Imaginado que temos um único elemento ul em nosso documento podemos fazer uso da função getElementsByTagName(). Ela retorna uma coleção, um array de elementos.

Como sabemos previamente que precisamos do primeiro item, acessaremos a coleção dessa forma colecao[0] ou mais resumidamente getElementsByTagName()[0], veja:

var lista = document.getElementsByTagName('ul')[0];

De posse de um elemento completo, podemos então, anexá-lo a um elemento <ul> já existente em nossa página HTML. A função elemento_pai.appendChild() insere o novo elemento filho ao final do elemento pai.

lista.appendChild(elem);

Também podemos inserir um elemento através da função insertBefore(), ela aceita dois parâmetros: o primeiro é o elemento filho e o segundo é o elemento que servirá de referência para inserir o elemento filho.

Para remover um elemento utilizamos a função removeChild().

Resumo

 document.createElement("nome-da-tag") para criar um elemento

 document.createTextNode("algum texto") para criar um nó de texto

 elemento_pai.appendChild(elemento_filho) para inserir um elemento na última posição

 elemento_pai.insertBefore(elemento_filho, elemento_anterior) pra inserir um elemento em posição específica

 elemento_pai.removeChild(elemento_filho) para remover um elemento

Criando, inserindo e removendo

Imagine que temos uma única lista em nosso documento e queremos criar e inserir mais alguns itens (li) para essa lista. Começaremos com um único elemento <ul> representando a lista.

<ul>

</ul>

(6)

Nosso objetivo é inserir alguns itens, chegando a este resultado:

<ul>

<li>mais um itens<li>

</ul>

Para criar um elemento utilizamos a função document.createElement("nome-da-tag"). Também devemos criar o nó de texto que irá compor o novo elemento. “Juntamos” o nó de texto e o recém criado elemento através do método appendChild().

No segundo bloco de código, recuperamos o único elemento ul acessando o primeiro item do array retornado por getElementsByTagName(). E, finalmente, inserimos o elemento ao documento utilizando-se (novamente) da função appendChild().

// Criar o elemento <li> e o nó de texto.

// Após isso, anexar o nó de texto ao elemento var elem = document.createElement("li");

var texto = document.createTextNode("mais um item");

elem.appendChild(texto);

// Recuperar o elemento lista e

// anexar o elemento <li> ao final de nossa lista <ul>

lista.appendChild(elem);

(7)

Simplificando com textContent

Podemos economizar uma linha de código fazendo proveito da propriedade textContent. Ao invés de criar um nó de texto e anexá-lo ao elemento, setamos a propriedade textContent com o texto desejado e simplificamos nosso código.

// Criar o elemento <li> e o nó de texto,

// Só que desta vez, aproveitando-se da propriedade textContent var elem = document.createElement("li");

elem.textContent = "mais um item";

// Recuperar o elemento lista e

// anexar o elemento <li> ao final de nossa lista <ul>

lista.appendChild(elem);

Inserindo com insertBefore

Em nosso exemplo temos o seguinte HTML:

<ul>

</ul>

Se quisermos inserir um outro elemento li no lugar do terceiro item (no caso index [2]) poderemos fazer o seguinte.

(8)

lista.insertBefore(elem, itens[2]);

 A variável lista deve conter a referência para a tag ul.

 A variável elem deve ser o nosso novo elemento.

 A variável itens deve ser uma coleção (array) com os elementos da lista.

Obedecendo aos critérios acima, temos…

// Obtendo referências

var itens = lista.getElementsByTagName('li');

// Criando o elemento

var elem = document.createElement("li");

elem.textContent = "outro item";

// Inserindo em posição específica lista.insertBefore(elem, itens[2]);

O código acima, se executado uma única vez, obterá o seguinte resultado:

<ul>

<li>outro item<li>

</ul>

(9)

Removendo

Para remover um nó utilizamos a função removeChild(). Devemos chamar a função a partir do elemento pai (no caso lista) e passar como parâmetro o elemento a ser removido. Novamente precisaremos da coleção de itens da lista (variável itens).

// Obtendo referências

var itens = lista.getElementsByTagName('li');

// Removendo determinado elemento lista.removeChild(itens[2])

O código acima, se executado uma única vez, removerá o item de índice 2 (outro item) e teremos novamente:

<ul>

</ul>