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