O DOM (Document Object Model) e o JavaScript, juntos, possuem grande poder de modificar dinamicamente a estrutura de um documento HTML. Sendo possível, por exemplo:
-
Adicionar/modificar/remover tags, textos, imagens e qualquer elemento no HTML.
-
Alterar estilos CSS da página.
-
Criar novos eventos HTML.
Vamos conferir formas de realizar os itens listados no tópico acima.
Métodos para selecionar elementos no HTML
document.getElementByID(id)- Selecionar um elemento pelo ID.document.getElementsByTagName(name)- Selecionar um elemento pelo nome.document.getElementsByClassName(name)- Selecionar um elemento pelo nome da classe.
Propriedades e métodos para alterar elementos no HTML
element.innerHTML- Esta propriedade obtém ou altera qualquer elemento no HTML, inclusive tags.element.innerText- Esta propriedade permite inserir textos no HTML.element.attribute- Esta propriedade altera o valor de um elemento HTML.element.setAttribute(atributo, valor)- Este método altera o valor de um atributo de um elemento HTML.
Adicionando e excluindo elementos
document.write()- Escreve no fluxo de saída do HTML.document.appendChild()- Adiciona um elemento HTML.document.removeChild()- Remove um elemento HTML.document.replaceChild()- Substitui um elemento HTML.document.createElement()- Cria um elemento HTML.