Primeiros Passos para manipular HTML DOM em JavaScript

24 de novembro de 2021
fcnuvem
Tutoriais
0 Comentários

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