document
HTMLElement
. They need a -
(dash) in their name, e.g. <notification-box>
..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
Show archive.org snapshot
you will find some utility functions for DOM manipulation and traversal in the
up.element
Show archive.org snapshot
module.