Posted 3 months ago. Visible to the public.

DOM API for jQuery users

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 you will find some utility functions for DOM manipulation and traversal in the up.element module.

Further reading

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Dominik Schöler
Last edit:
2 months ago
by Judith Roth
Keywords:
cheat, sheet
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more