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.