Dominado o DOM

· Leia em 8 minutos
Dominado o DOM


Quando um documento HTML é carregado em um browser, torna-se um document object. O document object é a raíz do HTML, sendo pai de todos os outros elementos.

DOM (Document Object Model), é a interface para o JavaScript se comunicar com os objetos/elementos do HTML.

DOM Tree

Para fazer essa interação existem muitas bibliotecas como o jQuery que facilitam a programação. Veremos aqui apenas alguns exemplos básicos sem o uso de nenhuma biblioteca.

Você pode ser perguntar o porquê disso? Muitos desenvolvedores quando começam a trabalhar com javascript pulam direto para uma biblioteca e com isso acabamos aprendendo apenas a biblioteca e não como tudo funciona por de baixo dos panos.

Selecionando elementos:

Para manipular um elemento, antes de tudo é necessário “selecioná-lo”, que pode ser feito como nas formas abaixo:

Atente que cada uma das formas de seleção possui suas especificidades, por exemplo, document.getElementById() é usado somente para selecionar elementos pelo atributo id="".

// document.getElementById()
document.getElementById('content')

// document.getElementsByClassName()
document.getElementsByClassName('box center')

// document.getElementsByName()
document.getElementsByName('search')

// document.getElementsByTagName()
document.getElementsByTagName('span')

// document.querySelector(selectors)
document.querySelector('.box')

// document.querySelectorAll(selectors)
document.querySelectorAll('#main .box')

Sempre que for manipular um mesmo elemento/objeto mais de uma vez é recomendado armazená-lo em uma variável por questões de performance e manutenção.

Pois o elemento já estará com sua seleção endereçada na variável.

var myElement = document.getElementById('post');
myElement.style.opacity = .7;
myElement.style.paddingBottom = '20px';

Criando elementos e adicionando eventos:

Mesmo com a página já renderizada ainda é possível criar e adicionar elementos ao DOM.

Também podemos adicionar eventos a todos os elementos da página.

// document.createElement()
var newElement = document.createElement('div');
document.body.innerHTML = newElement;

// document.write()
document.write('<span class="alert error">Ocorreu um erro.</span>');

// document.addEventListener()
document.addEventListener('DOMContentLoaded', funcaoXX, false);

// element.addEventListener()
var myElem = document.querySelector('.btn-login');
myElem.addEventListener('click', funcaoXX, false);

Adicionando e removendo classes:

var elem = document.querySelector('div');

// Adicionando
elem.classList.add('box');

// Removendo
elem.classList.remove('active');

// Verificando se possui a classe
elem.classList.contains('active');

// Toggle class
elem.classList.toggle('active');

Em JavaScript temos uma infinidade de operações que podemos fazer, listo algumas que podem ser úteis:

element.width
element.height
element.title
element.onclick
element.onload
element.ononline
element.onscroll
element.onresize
element.location
element.style
element.className

element.getAttribute(nomeDoAtributo)
element.removeAttribute(nomeDoAtributo)
element.hasAttribute(nomeDoAtributo)

element.offsetTop
element.innerHTML
element.focus
element.blur
element.change

element.keyup
element.keyup
element.keypress

element.click
element.dblclick
element.mousedown
element.mouseenter
element.mouseleave
element.mousemove
element.mouseover
element.mouseout
element.mouseup

element.submit

Tenha sempre em mente os navegadores que você deseja dar suporte e veja se é compatível com os métodos que irá utilizar.

Com a nova especificação do HTML (HTML5) existem algumas APIs em JavaScript a nossa disposição, como no exemplo abaixo a API de Drag ‘n Drop.

dragstart
dragenter
dragover
dragleave
drop
dragend

// Exemplo

element.addEventListener('dragstart', funcaoDragStart, false);
element.addEventListener('dragenter', funcaoDragEnter, false)
element.addEventListener('dragover', funcaoDragOver, false);
element.addEventListener('dragleave', funcaoDragLeave, false);
element.addEventListener('drop', funcaoDrop, false);
element.addEventListener('dragend', funcaoDragEnd, false);

A mesma lógica se aplica para API de interações touch screen.

touchstart
touchenter
touchmove
touchcancel
touchleave
touchend

Já podemos fazer uso de inúmeras APIs, como:

  • Drag ‘n Drop
  • Touch Events
  • Web Storage
  • Geolocation
  • Web Audio
  • WebRTC
  • Page Visibility
  • Vibration API
  • Pointer Events
  • etc

Lista de APIs: Javascript APIs Current Status

Combinando o que vimos nesse post podemos elaborar códigos nesse estilo:

function alteraItem(e) {
  e.preventDefault();
  e.style.background = 'red';
}

function terminaTouch(elem) {
  elem.preventDefault();
  elem.style.background = 'green';
  elem.innerHTML = '<span>Meu touch terminou.</span>';
}

document.addEventListener('DOMContentLoaded', function() {
  var item = document.querySelector('.box-touch');
  item.style.height = '100px';

  item.addEventListener('touchstart', alteraItem, false);
  item.addEventListener('touchend', terminaTouch, false);
}, false);

O propósito desse post foi apresentar o DOM e mostrar o poder do JavaScript puro, mostrar que é simples de criar pequenas funcionalidades sem o uso de bibiotecas, tendo um código mais leve.

As vezes é preciso criar algo pequeno, que não exige tanto código nem tanta complexidade, e mesmo assim já adicionamos o jQuery para criar um simples evento de click, sem a necessidade do mesmo.

Eu mesmo tenho jQuery por padrão nos meus projetos, e uso sempre, é excelente, mas para um Hot site ou algo do tipo, nem sempre será preciso.

“A simplicidade é o último grau de sofisticação”, Da Vinci.