The toolkit-use npm package has added commonly used DOM methods.

dom utils

Get Hexadecimal Color

import { getColor } from 'toolkit-use/dist/dom/index.esm'
const color = getColor()

Event Utilities

import { eventUtils } from 'toolkit-use/dist/dom/index.esm'
// Add event listener
eventUtils.addHandler(element, type, handler)
// Remove event listener
eventUtils.removeHandler(element, type, handler)
// Get compatibility event
eventUtils.getEvent(event)
// Get actual target
eventUtils.getTarget(event)
// Prevent default event
eventUtils.preventDefault(event)
// Stop event propagation
eventUtils.stopPropagation(event)
// Get related target
eventUtils.getRelatedTarget(event)
// Get button code
eventUtils.getButton(event)
// Get wheel delta
eventUtils.getWheelDelta(event)
// Get char code
eventUtils.getCharCode(event)

Add Class Name

import { addClass } from 'toolkit-use/dist/dom/index.esm'
addClass(elem, className)

Remove Class Name

import { removeClass } from 'toolkit-use/dist/dom/index.esm'
removeClass(elem, className)

Get offsetLeft

import { getElementLeft } from 'toolkit-use/dist/dom/index.esm'
getElementLeft(elem)

Get offsetTop

import { getElementTop } from 'toolkit-use/dist/dom/index.esm'
getElementTop(elem)

Get Offset

import { getOffset } from 'toolkit-use/dist/dom/index.esm'
getOffset(elem)

Get Viewport Width and Height

import { getViewport } from 'toolkit-use/dist/dom/index.esm'
getViewport()

Traverse Element Attributes

import { outputAttributes } from 'toolkit-use/dist/dom/index.esm'
outputAttributes(elem)