Primeiros Passos para manipular HTML DOM em JavaScript

Quando uma página web é carregada, o navegador cria um DOM – Document Object Model, é um Modelo de Objeto de Documento que permite o acesso e manipulação ao HTML, assim JavaScript pode acessar e alterar todos os elementos de um documento HTML. 

O modelo HTML DOM é construído como uma árvore de objetos: 

^{A árvore de objetos DOM do HTML / W3Schools} 

Com o modelo de objeto, o JavaScript obtém todo o poder necessário para: 

• Criar elementos HTM em uma página; 
• Alterar todos os elementos HTML em uma página; 
• Remover elementos HTML existentes em uma página; 

• Alterar todos os atributos HTML em uma página; 
• Alterar todos os estilos CSS em uma página; 
• Reagir a todos os eventos HTML em uma página. 

Entenda o que é o DOM 

DOM é um padrão W3C (World Wide Web Consortium). O DOM define um padrão para acessar documentos: 

O Modelo de Objeto de Documento do W3C (DOM) é uma plataforma e interface de linguagem neutra que permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, estrutura, e estilo de um document, o W3C 

O padrão W3C DOM é separado em 3 partes diferentes: 

– DOM Principal: Modelo padrão para todos os tipos de documentos; 

– DOM XML: Modelo padrão para documentos XML; 

– DOM HTML: Modelo padrão para documentos HTML. 

Entenda o que é o HTML DOM 

O DOM HTML é um modelo de objeto padrão e também interface de programação para HTML. Define: 

– Elementos HTML como objetos (objects); 

– As propriedades (properties) de todos os elementos HTML; 

– Os métodos (methods) para acessar todos os elementos HTML; 

– Os eventos para todos os elementos HTML 

Em outras palavras: “O HTML DOM é um padrão para obter, alterar, adicionar ou deletar elementos HTML”. – W3C Schools 

A Interface de Programação DOM 

Todos os elementos HTML no DOM são definidos como objetos, a interface de programação é composta pelas propriedades e métodos de cada objeto. 

A propriedade é um valor obtido (get) ou definido (set), como alterar o conteúdo de um elemento HTML, o método é uma ação que você pode fazer, como adicionar ou deletar um elemento HTML. 

Vejamos um exemplo, onde alteramos o conteúdo interno do elemento <div> de  id=”content”: 

<div id=”content”></div> 
 
<script> 
  document.getElementById(“content”).innerHTML=”Olá, como vai?”; 
</script> 

O método getElementById acessa um elemento HTML por sua id e a propriedade innerHTML obtém o conteúdo de um elemento. No nosso caso, substituímos o conteúdo “vazio” por nossa saudação. 

HTML DOM Document 

O objeto de documento HTML DOM é o proprietário de todos os outros objetos em sua página web, se você deseja acessar qualquer elemento HTML em uma página, comece acessando o objeto document. 

Vejamos alguns exemplos de como utilizar o objeto document para acessar e manipular HTML: 

– Método document.getElementById(id) : Encontra um elemento pelo id 

– Método document.getElementByTagName(name) : Encontra elementos pela tag HTML 

– Método document.getElementByClassName(name) : Encontra elementos pela classe html 

Após acessar o elemento, temos a opção de alterá-lo da seguinte forma: 

• Propriedade element.innerHTML=”novo conteúdo” : Altera o conteúdo interno de um elemento HTML 
• Propriedade element.attribute=”novo valor” : Altera o valor do atributo de um elemento HTML 

• Propriedade element.style.property=”novo estilo” : Altera o estilo de um elemento HTML 
• Método element.setAttribute(attribute, value) : Altera o valor do atributo de um elemento HTML 

Também podemos adicionar e deletar elementos da página da seguinte forma: 

• Método document.createElement(element) : Cria um elemento HTML 
• Método document.removeChild(element) : Remove um elemento HTML 
• Método document.appendChild(element) : Adiciona um elemento HTML 
• Método document.replaceChild(new, old) : Substitui um elemento HTML 
• Médoto document.write(text) : Escreve no fluxo de saída HTML 

Outra possibilidade, é manipular eventos sobre determinadas ações, vejamos: 

Método document.getElementById(id).onclick=function() { …. }: Adicionando o código do manipulador de eventos a um evento onclick. 

Conclusão 

Agora que você foi apresentado aos primeiros passos de manipulação do HTML DOM com JavaScript, você é capaz de compor conteúdo e estilo de suas páginas HTML de forma dinâmica, no entanto, existem maneiras mais otimizadas e profissionais de se trabalhar com JavaScript e seus eventos no DOM. 

Como primeira experiência de aprendizagem, recomendo praticar a utilização de propriedades e seus métodos, listeners e eventos, a fim de conhecer a utilização dos mesmos em aplicações para web. 

Referências 

 W3Schools – JavaScript HTML DOM:   https://www.w3schools.com/js/js_htmldom.asp 

 W3C DOM 4.1: https://www.w3.org/TR/2018/WD-dom41-20180201/ 

 W3Schools –-JavaScript HTML DOM Methods: https://www.w3schools.com/js/js_htmldom_document.asp 

W3Schools – Javascript HTML DOM Elements: https://www.w3schools.com/js/js_htmldom_elements.asp 

W3Schools – JavaScript HTML DOM Events: 

https://www.w3schools.com/js/js_htmldom_events.asp

W3Schools – JavaScript HTML DOM EventListener: https://www.w3schools.com/js/js_htmldom_eventlistener.asp