Trabalhando com a API do DOM

O DOM, ou Document Object Model, é uma interface de programação de aplicativos (API) que permite aos desenvolvedores manipular o conteúdo HTML e CSS de uma página da web.

O DOM é organizado em uma árvore de nós (Nodes), onde cada nó representa um elemento HTML na página. Os desenvolvedores podem usar JavaScript para acessar e manipular esses nós, adicionando, removendo e modificando elementos HTML em tempo real.

Neste tutorial, vamos explorar os conceitos básicos do DOM e como usá-lo para manipular o HTML de uma página da web.

Obtendo elementos do DOM

Antes de podermos manipular o HTML de uma página, precisamos primeiro obter os elementos HTML desejados usando o DOM.

Existem vários métodos para obter elementos do DOM, mas dois dos mais comuns são document.getElementById() e document.querySelector(). O document.getElementById() retorna um elemento HTML com base no valor do atributo id, enquanto o document.querySelector() retorna o primeiro elemento HTML que corresponde a um seletor CSS específico.

// Obtendo um elemento por ID
const myElement = document.getElementById('my-id');

// Obtendo o primeiro elemento que corresponde a um seletor CSS
const myOtherElement = document.querySelector('.my-class');

Manipulando conteúdo do DOM

Uma vez que temos referências aos elementos HTML que queremos manipular, podemos atualizar seu conteúdo usando o DOM.

Para atualizar o conteúdo de um elemento HTML, podemos usar as propriedades textContent ou innerHTML. A propriedade textContent define o texto dentro de um elemento, enquanto a propriedade innerHTML define o HTML dentro de um elemento.

// Atualizando o texto de um elemento
myElement.textContent = 'Novo texto aqui';

// Atualizando o HTML de um elemento
myOtherElement.innerHTML = '<p>Novo HTML aqui</p>';

Adicionando e removendo elementos do DOM

Podemos adicionar e remover elementos HTML do DOM usando o JavaScript. Para adicionar um novo elemento HTML, podemos criar um novo nó usando o método document.createElement() e anexá-lo a um elemento existente usando o método appendChild().

Para remover um elemento HTML, podemos usar o método removeChild().

// Criando um novo elemento HTML
const newElement = document.createElement('div');

// Definindo o conteúdo do novo elemento
newElement.textContent = 'Novo elemento aqui';

// Anexando o novo elemento a um elemento existente
myElement.appendChild(newElement);

// Removendo um elemento
myOtherElement.removeChild(myOtherElement.firstChild);

Manipulando atributos do DOM

Os elementos HTML também possuem atributos que podemos acessar e manipular usando o DOM. Podemos obter e definir valores de atributos usando as propriedades getAttribute() e setAttribute().

// Obtendo o valor de um atributo
const myAttribute = myElement.getAttribute('data-my-attribute');

// Definindo o valor de um atributo
myOtherElement.setAttribute('data-my-other-attribute', 'meu valor');

Conclusão

O DOM é uma ferramenta poderosa que os desenvolvedores podem usar para manipular o conteúdo HTML e CSS de uma página da web em tempo real. Com as habilidades básicas que aprendemos neste tutorial, você deve estar bem encaminhado para começar a criar páginas web dinâmicas e interativas.