dom

Short-hand wrappers around common DOM operations — querying, creating elements, classes, attributes, and data-* attributes.

Import: @rtorcato/browser-common/dom

📖 MDN: Document Object Model

Browser support

API	Chrome	Edge	Firefox	Safari	iOS Safari	Baseline
Document.querySelector	✅ 1+	✅ 12+	✅ 3.5+	✅ 3.1+	✅ 2+	Widely available
Document.createElement	✅ 1+	✅ 12+	✅ 1+ [1]	✅ 1+	✅ 1+	Widely available

1. Firefox: Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: Document.querySelector · Document.createElement

Example

import { $, $$, createElement, addClass, toggleClass, setData } from '@rtorcato/browser-common/dom'

const btn = $('button.primary')
const items = $$('.item')

const el = createElement('button', { className: 'primary' }, 'Save')
addClass(el, 'active')
toggleClass(el, 'open')
setData(el, 'userId', '42')

Exports

• $(selector, parent?) — selects the first matching element, or null
• $$(selector, parent?) — selects all matching elements as an array
• createElement(tag, props?, ...children) — creates an element with props and children
• removeElement(el) — removes an element from the DOM
• setAttributes(el, attrs) — sets multiple attributes at once
• addClass(el, ...classes) — adds one or more classes
• removeClass(el, ...classes) — removes one or more classes
• toggleClass(el, className, force?) — toggles a class, returns whether it's now present
• hasClass(el, className) — true if the element has the class
• getData(el, key) — reads a data-* attribute
• setData(el, key, value) — sets a data-* attribute

See the API reference for full signatures.