Resumo: técnicas de modificação DOM

Modificando um elemento existente

Cobrimos várias formas de modificar aspectos de um elemento existente:

Modificando atributos

Você pode definir um atributo em um elemento definindo a propriedade de mesmo nome. Por exemplo, para alterar o src de uma <img>:

imgEl.src = "http://www.dogs.com/dog.gif";

Além disso, você pode usar o método setAttribute, assim:

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

Se você quiser remover um atributo, você deve fazer isso com removeAttribute - como para remover o atributo disabled de um botão, habilitando-o efetivamente:

imgEl.removeAttribute("disabled");

Modificando estilos

Você pode alterar estilos da mesma forma que você altera atributos, acessando a propriedade style do elemento e definindo a propriedade correspondente. Por exemplo, para alterar a cor:

headingEl.style.color = "hotpink";

Lembre-se de usar "camelCase" para os nomes de propriedade CSS com várias palavras, já que hifens não são válidos para os nomes das propriedades JS:

headingEl.style.backgroundColor = "salmon";

Modificando nomes de classe

Para adicionar uma classe a um elemento, você pode definir a propriedade className:

mainEl.className = "warning";

Isso vai sobrescrever qualquer classe existente, então você deve fazer isso se você quiser adicionar à lista de classes:

mainEl.className += " warning";

Em navegadores mais novos, você pode usar a funcionalidade classList:

mainEl.classList.add("warning");

Modificando HTML / texto interno

Para substituir completamente os conteúdos de um elemento por uma string de HTML arbitrária, use innerHTML:

mainEl.innerHTML = "gatos são os <strong>mais fofos</strong>";

Se você não precisar passar tags HTML, você deve usar textContent:

mainEl.textContent = "gatos são os mais fofos";

Normalmente você deve ter cuidando ao usar qualquer uma dessas 2 propriedades, porque elas também removem os listeners de eventos (os quais ensinaremos no próximo tutorial).

Criando elementos desde o início

Há um conjunto de funções que você pode usar para criar elementos inteiramente novos e adicioná-los à página.

Para criar um novo elemento, use o comando chamado createElement:

var imgEl = document.createElement("img");

Para anexá-lo à página, chame appendChild no elemento pai de destino:

document.body.appendChild(imgEl);

Da mesma forma, você também pode usar insertBefore, replaceChild, removeChild, e insertAdjacentHTML.

Quer participar da conversa?

Entrar

Classificar por:

Nenhuma postagem por enquanto.

Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.