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.

Our laser focus on a single technology has made us a leader in this space. Need help?