DOM

Métodos para manipulação do DOM.


__.dom.get( selector: string )

Retorna um ou mais objetos, baseado no seletor utilizado.

__.dom.get('body'); // "<body>...</body>"
__.dom.get('p'); // [<p>...</p>, <p>...</p>]

__.dom.get( selector ).classList

Nativamente, temos um número de métodos disponíveis para manipular as classes dos nossos elementos. Os mais comuns são:

  • add() para adicionar uma classe em um elemento
  • remove() para remover uma classe de um elemento
  • toggle() para alternar uma classe em um elemento
  • contains() para checar se um elemento tem uma classe
  • length para retornar o número de classes em um elemento

Eles são ótimos! E como já comentei, é nativo. Isso significa menos código extra. Coisa linda, não? Acho até que você está começando a se esquecer daqueles métodos do jQuery, não?

Fora isso, temos duas variações pra você:

  • addMany() para adicionar uma ou mais classes em um elemento
  • removeMany() para remover uma ou mais classes de um elemento 
__.dom.get('h1').classList.addMany('t-600 t-700 t-800 t-x t-900 t-1000'); // "<p class="t-600 t-700 t-800 t-x t-900 t-1000"></p>"
__.dom.get('h1').classList.removeMany('t-600 t-700 t-x t-900 t-1000'); // "<p class="t-800"></p>"

Só tem um defeito: De fábrica, estes métodos lidam apenas com um elemento por vez. Sendo assim, para aplicar a múltiplos elementos, você teria que chama o método dentro de um loop forEach.

Bem... Não mais! Resolvemos isso pra você.

Agora você pode usar classList direto de uma nodeList! Estes são os métodos disponíveis: add(), addMany(), remove(), removeMany() e toggle(). 

__.dom.get('p').classList.add('z'); // "<p class="x y z"></p><p class="x y z"></p>"
__.dom.get('p').classList.remove('z'); // "<p class="x y"></p><p class="x y"></p>"
__.dom.get('p').classList.toggle('y'); // "<p class="x"></p><p class="x"></p>"