O que é o Document Object Model (DOM)?
O DOM (Document Object Model) é uma API que permite que você manipule o conteúdo de uma página da web. É uma interface de programação de aplicativos (API) para documentos HTML e XML. Ele fornece uma representação estruturada do documento como um conjunto de nós e objetos que possuem propriedades e métodos. Os nós também podem ter manipuladores de eventos para notificar o código quando eventos ocorrem, como cliques do mouse, pressionamentos de tecla ou alterações de formulário. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo ou conteúdo do documento.
O DOM é uma representação orientada a objetos do documento da web, que pode ser modificada com um script. Pode ser acessado por qualquer linguagem de programação compatível com ECMAScript, como JavaScript. O DOM é especificado pela W3C (World Wide Web Consortium).
O JavaScript fornece uma variedade de métodos para acessar e alterar o DOM.
Selecionando elementos
Você pode selecionar elementos usando os métodos document.getElementById, document.getElementsByClassName, document.getElementsByTagName e document.querySelector.
document.getElementById
O método document.getElementById retorna o primeiro elemento que possui o atributo id com o valor especificado.
let elemento = document.getElementById('elemento');
document.getElementsByClassName
O método document.getElementsByClassName retorna uma coleção de elementos que possuem o atributo class com o valor especificado.
let elementos = document.getElementsByClassName('elemento');
document.getElementsByTagName
O método document.getElementsByTagName retorna uma coleção de elementos que possuem a tag especificada.
let elementos = document.getElementsByTagName('div');
document.querySelector
O método document.querySelector retorna o primeiro elemento que corresponde ao seletor especificado. Aqui é possível passar diferentes tipos de seletores, como #id, .class e tag.
let elemento = document.querySelector('#elemento');
let elemento2 = document.querySelector('.class');
let elemento3 = document.querySelector('[data-id-test="foo"');
Manipulando elementos
Você pode manipular elementos usando os métodos appendChild, removeChild, replaceChild, insertBefore, cloneNode, createElement, createTextNode, setAttribute e removeAttribute.
appendChild
O método appendChild adiciona um nó como o último filho de um elemento.
let elemento = document.getElementById('elemento');
let novoElemento = document.createElement('div');
elemento.appendChild(novoElemento);
removeChild
O método removeChild remove um nó filho de um elemento.
let elemento = document.getElementById('elemento');
let filho = document.getElementById('filho');
elemento.removeChild(filho);
replaceChild
O método replaceChild substitui um nó filho de um elemento por outro nó.
let elemento = document.getElementById('elemento');
let novoFilho = document.createElement('div');
let filho = document.getElementById('filho');
elemento.replaceChild(novoFilho, filho);
insertBefore
O método insertBefore insere um nó antes de um nó filho de um elemento.
let elemento = document.getElementById('elemento');
let novoElemento = document.createElement('div');
let filho = document.getElementById('filho');
elemento.insertBefore(novoElemento, filho);
cloneNode
O método cloneNode retorna uma cópia de um nó.
let elemento = document.getElementById('elemento');
let clone = elemento.cloneNode(true);
createElement
O método createElement cria um elemento com a tag especificada.
let elemento = document.createElement('div');
createTextNode
O método createTextNode cria um nó de texto com o texto especificado.
let texto = document.createTextNode('Hello World');
setAttribute
O método setAttribute define o valor de um atributo em um elemento.
let elemento = document.getElementById('elemento');
elemento.setAttribute('id', 'novo-id');
removeAttribute
O método removeAttribute remove um atributo de um elemento.
let elemento = document.getElementById('elemento');
elemento.removeAttribute('id');