Read more

DOM API for jQuery users

Dominik Schöler
July 24, 2019Software engineer at makandra GmbH

General hints on the DOM

  • the root of the DOM is document
  • custom elements inherit from HTMLElement. They need a - (dash) in their name, e.g. <notification-box>.
  • event listeners don't have event delegation à la .on('click', cssSelector, handler)

Comparison

Action jQuery DOM API equivalent
Find descendant(s) by CSS selector .find(selector) one: .querySelector(selector), many: .querySelectorAll(selector)
Test an element (returns boolean) .is(selector) .matches(selector)
Test for class presence (boolean) .hasClass(class) .classList.contains(class)
Add class .addClass(class) .classList.add(class)
Remove class .removeClass(class) .classList.remove(class)
Toggle class .toggleClass(class) .classList.toggle(class)
Register an event listener .on('click', handlerFn) .addEventListener('click', handlerFn)
Register an event listener with delegation .on('click', selector, handlerFn) use a library like Unpoly
Read an attribute .attr(name) .getAttribute(name)
Write an attribute .attr(name, value) .setAttribute(name, value)

When your app also uses Unpoly Show archive.org snapshot you will find some utility functions for DOM manipulation and traversal in the up.element Show archive.org snapshot module.

Further reading

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot
Dominik Schöler
July 24, 2019Software engineer at makandra GmbH
Posted by Dominik Schöler to makandra dev (2019-07-24 17:54)