Manipulação do DOM com Javascript

A manipulação do DOM (Document Object Model) é uma das principais funcionalidades do Javascript no desenvolvimento de sites web. O DOM é uma representação em memória do documento HTML, que permite ao Javascript acessar e modificar os elementos da página de forma dinâmica.

Para manipular o DOM com Javascript, é necessário primeiro selecionar o elemento HTML desejado. Isso pode ser feito de diversas formas, como por meio do ID do elemento, da classe CSS ou do tipo de tag. Uma vez selecionado o elemento, é possível acessar suas propriedades e métodos para realizar a manipulação desejada.

Por exemplo, para alterar o conteúdo de um elemento HTML, pode-se utilizar a propriedade innerHTML. Veja o exemplo abaixo:

// Seleciona o elemento com ID "titulo"
var titulo = document.getElementById("titulo");

// Altera o conteúdo do elemento
titulo.innerHTML = "Novo Título";

Além de alterar o conteúdo dos elementos, é possível também modificar suas propriedades, como o estilo CSS. Para isso, pode-se utilizar a propriedade style, que permite acessar e modificar as propriedades de estilo do elemento. Veja o exemplo abaixo:

// Seleciona o elemento com ID "paragrafo"
var paragrafo = document.getElementById("paragrafo");

// Altera a cor do texto do parágrafo para vermelho
paragrafo.style.color = "red";

Outra forma de manipular o DOM com Javascript é por meio da criação e remoção de elementos HTML. Para isso, pode-se utilizar os métodos createElement e removeChild, respectivamente. Veja o exemplo abaixo:

// Cria um novo elemento "div"
var novoDiv = document.createElement("div");

// Adiciona o novo elemento ao final do body
document.body.appendChild(novoDiv);

// Remove o elemento com ID "paragrafo"
var paragrafo = document.getElementById("paragrafo");
document.body.removeChild(paragrafo);

Por fim, é importante lembrar que a manipulação do DOM com Javascript pode ser uma tarefa complexa e requer um bom conhecimento da estrutura HTML e do funcionamento do Javascript. É recomendado o uso de bibliotecas como jQuery, que facilitam a manipulação do DOM e oferecem uma sintaxe mais simples e intuitiva.

Próxima página do Ebook Gratuito:

9Eventos em Javascript

2 minutos