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.

We make sure that your target audience has the best possible experience with your digital product. You get: