DOM

Methods to manipulate the DOM.


__.dom.get( selector: string )

Returns one or more node elements, based on the given selector.

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

__.dom.get( selector ).classList

Natively, a number of methods that can be used to manipulate an elements class. The most common are:

  • add() for adding a class to the element
  • remove() for removing a class from the element
  • toggle() for toggling a class in and out of the element
  • contains() to check if the element has a class
  • length to return the number of classes in the element

They are great! And as I said, they are native! Which means no extra code. How beautiful is that? I think you're starting to forget about those jQuery methods, right?

We got also two helpful variations for you:

  • addMany() for adding more then one class to the element
  • removeMany() for removing more then one class from the element 
__.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>"

But there is one flaw: by default it only handles one element at a time. So, to apply it to multiple elements, you would need to call those methods inside a forEach loop.

Well... Not anymore! We got you covered.

Now you can use classList directly from a NodeList! These are the available methods: add(), addMany(), remove(), removeMany() and 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>"