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