DOM, O que é e como funciona

Document Object Model (DOM) é uma API para documentos HTML e XML, permite a manipulação do conteúdo e da forma desses documentos. Isso significa que, com o DOM, se pode adicionar, remover ou modificar elementos, definir eventos e atributos, e acessar informações do usuário.

O DOM representa a estrutura de um documento como uma árvore de elementos, onde cada elemento é um nó e seus filhos são nós descendentes.

O JavaScript utiliza o DOM de uma forma ampla, pois a linguagem fornece uma maneira simples e poderosa de manipular os elementos do documento.

Alguns exemplos de como usar o DOM com JavaScript:

Adicionar elemento:

let message = document.createElement("p");

message.innerHTML = `"Paragrafo criado via JavaScrip"!`;

document.body.appendChild(message);;

Modifiar um elemento:

let paragrafo = document.getElementById('paragrafo');

paragrafo.innerHTML = `Oi tudo bem? <br/><br/>"Messangem emitida via JavaScrip"!`;

Remover um elemento:

let lista = document.querySelector("ul");

function remove(index) {
  lista.removeChild(lista.childNodes[index]);
};

Defenir Evento:

let btn = document.querySelector("#clicar");

btn.addEventListener("click", function() {
alert("Botão clicado");
});

Acessar informações do usuário:

let input = document.querySelector("input");

let textEntered = document.getElementById('textEntered');

input.addEventListener("change", function() {
  textEntered.innerHTML = input.value;
});

O DOM é fundamental para a programação web permitindo a criação de aplicações interativas com HTML e JavaScript. Portanto, é importante que todo o desenvolvedor web entenda como o DOM funciona e como utiliza-lo para manipular documentos HTML.

Código completo no github.