@rtorcato/browser-common / dom
dom
Functions
$()
$(
selector,parent?):Element|null
Defined in: dom/index.ts:12
Selects a single element by CSS selector.
Example
import { $ } from '@rtorcato/browser-common/dom'
const btn = $('button.primary')
Parameters
selector
string
The CSS selector.
parent?
Element | Document
The parent element to search within (defaults to document).
Returns
Element | null
The first matching element or null.
$$()
$$(
selector,parent?):Element[]
Defined in: dom/index.ts:27
Selects all elements matching a CSS selector.
Example
import { $$ } from '@rtorcato/browser-common/dom'
const items = $$('.item')
Parameters
selector
string
The CSS selector.
parent?
Element | Document
The parent element to search within (defaults to document).
Returns
Element[]
An array of matching elements.
createElement()
createElement<
K>(tag,props?, ...children):HTMLElementTagNameMap[K]
Defined in: dom/index.ts:43
Creates a new DOM element with optional properties and children.
Example
import { createElement } from '@rtorcato/browser-common/dom'
const btn = createElement('button', { className: 'primary' }, 'Save')
Type Parameters
K
K extends keyof HTMLElementTagNameMap
Parameters
tag
K
The tag name.
props?
Partial<HTMLElementTagNameMap[K]> = {}
Optional properties/attributes.
children
...(string | HTMLElement)[]
Optional child elements or strings.
Returns
HTMLElementTagNameMap[K]
The created element.
removeElement()
removeElement(
el):void
Defined in: dom/index.ts:65
Removes an element from the DOM.
Example
import { removeElement } from '@rtorcato/browser-common/dom'
removeElement(document.querySelector('.toast')!)
Parameters
el
Element
The element to remove.
Returns
void
setAttributes()
setAttributes(
el,attrs):void
Defined in: dom/index.ts:81
Sets multiple attributes on an element.
Example
import { setAttributes } from '@rtorcato/browser-common/dom'
setAttributes(input, { type: 'email', required: 'true' })
Parameters
el
Element
The element.
attrs
Record<string, string>
An object of attribute key-value pairs.
Returns
void
addClass()
addClass(
el, ...classes):void
Defined in: dom/index.ts:97
Adds one or more classes to an element.
Example
import { addClass } from '@rtorcato/browser-common/dom'
addClass(el, 'active', 'highlighted')
Parameters
el
Element
The element.
classes
...string[]
The classes to add.
Returns
void
removeClass()
removeClass(
el, ...classes):void
Defined in: dom/index.ts:111
Removes one or more classes from an element.
Example
import { removeClass } from '@rtorcato/browser-common/dom'
removeClass(el, 'hidden')
Parameters
el
Element
The element.
classes
...string[]
The classes to remove.
Returns
void
toggleClass()
toggleClass(
el,className,force?):boolean
Defined in: dom/index.ts:127
Toggles a class on an element.
Example
import { toggleClass } from '@rtorcato/browser-common/dom'
const isOpen = toggleClass(panel, 'open')
Parameters
el
Element
The element.
className
string
The class to toggle.
force?
boolean
Optional boolean to force add/remove.
Returns
boolean
True if the class is now present, false otherwise.
hasClass()
hasClass(
el,className):boolean
Defined in: dom/index.ts:142
Checks if an element has a specific class.
Example
import { hasClass } from '@rtorcato/browser-common/dom'
if (hasClass(el, 'active')) doSomething()
Parameters
el
Element
The element.
className
string
The class to check.
Returns
boolean
True if the element has the class, false otherwise.
getData()
getData(
el,key):string|undefined
Defined in: dom/index.ts:157
Gets the value of a data-* attribute from an element.
Example
import { getData } from '@rtorcato/browser-common/dom'
const id = getData(el, 'userId')
Parameters
el
HTMLElement
The element.
key
string
The data attribute key (without 'data-').
Returns
string | undefined
The value or undefined.
setData()
setData(
el,key,value):void
Defined in: dom/index.ts:172
Sets the value of a data-* attribute on an element.
Example
import { setData } from '@rtorcato/browser-common/dom'
setData(el, 'userId', '42')
Parameters
el
HTMLElement
The element.
key
string
The data attribute key (without 'data-').
value
string
The value to set.
Returns
void