Posted about 1 year 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)


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

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Dominik Schöler
Last edit:
12 months ago
by Judith Roth
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 short-lived cookies to improve usability.
Accept or learn more