Document Object Model DOM - sabrinabm94/javascript GitHub Wiki
É cópia de um arquivo html o apresentando em árvore. O arquivo html é tratado como se fosse uma árvore de nódulos onde cada nódulo representa objetos do documento. E nesse processo geral uma interface de programação para o html. Por meio do DOM, temos métodos para acessar a árvore de elementos de um arquivo html onde se pode usar eventos javascript para manipular o html.
Antes de manipular elementos, é necessário os obter buscando no dom, e as formas mais usadas para isso é busca por tag, id e classe.
// busca por tag
<h1>Título</h1>
let title = document.getElementsByTagName('h1')[0]; //retorna a lista de elementos com essa tag, por isso usamos o indice
// busca por id
<ul id="list">
<li classe="list-item">Item um</li>
<li classe="list-item">Item dois</li>
</ul>
let list = document.getElementsById('list'); //retorna o elemento único com esse id
//busca por classe
let listItems = document.getElementsByClassName('list-item'); //retorna a lista de elementos com essa classe
//Forma mais indicado de selecionar elementos
document.querySelectorAll(".list-item"); //retorna a lista de elementos com essa classe
document.querySelector("#list"); //retorna o elemento único com esse idPodemos remover, adicionar e alterar elementos no html manipulando o DOM. No exemplo abaixo, vamos adicionar uma lista de frutas a uma tela html.
let fruits = ['redberry', 'blueberry', 'blackberry', 'raspberry'];
let htmlList = document.createElement('ul');
htmlList.classList.add('fruits-list');
let htmlBody = document.getElementsByTagName('body');
htmlBody[0].appendChild(htmlList);
let htmlListInBody = document.getElementsByClassName('fruits-list');
console.log(htmlListInBody[0]);
for(let i = 0; i < fruits.length; i++) {
let htmlListItem = document.createElement('li');
let htmlListItemText = document.createTextNode(fruits[i]);
htmlListItem.appendChild(htmlListItemText);
htmlListInBody.appendChild(htmlListItem);
}Cada vez que tem uma alteração no html o seu DOM será atualizado pois a estrutura de nódulos correspondente aquele html deverá ser atualizado.