Socket
Socket
Sign inDemoInstall

dom-helpers

Package Overview
Dependencies
3
Maintainers
3
Versions
34
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

dom-helpers

tiny modular DOM lib for ie9+

    5.2.1latest
    GitHub
    npm

Version published
Maintainers
3
Weekly downloads
10,447,924
decreased by-16.6%

Weekly downloads

Package description

What is dom-helpers?

The dom-helpers package is a collection of utility functions for managing and interacting with the DOM. It provides a consistent and cross-browser way to perform common DOM manipulation tasks without relying on a larger library like jQuery.

What are dom-helpers's main functionalities?

Class Manipulation

Allows adding and removing CSS classes from DOM elements.

import { addClass, removeClass } from 'dom-helpers';
const element = document.getElementById('my-element');
addClass(element, 'new-class');
removeClass(element, 'old-class');

Events

Facilitates adding and removing event listeners to DOM elements.

import { on, off } from 'dom-helpers';
const handleClick = event => console.log('Clicked!', event);
const element = document.getElementById('my-button');
on(element, 'click', handleClick);
// Later on, to remove the event listener
off(element, 'click', handleClick);

Query

Provides a way to select DOM elements using CSS selectors.

import { querySelectorAll } from 'dom-helpers';
const items = querySelectorAll(document, '.list-item');
console.log(items);

Style

Enables getting and setting CSS styles on DOM elements.

import { css } from 'dom-helpers';
const element = document.getElementById('my-element');
css(element, { display: 'none' });
css(element, 'display', 'block');

Dimensions

Allows measuring and setting the dimensions of DOM elements.

import { height, width } from 'dom-helpers';
const element = document.getElementById('my-element');
console.log(height(element));
console.log(width(element));

Other packages similar to dom-helpers

Changelog

Source

5.2.1 (2021-04-26)

Features

  • Support padding in transitionEnd (#96) (7b2f626)

Readme

Source

dom-helpers

tiny modular DOM lib for ie9+

Install

npm i -S dom-helpers

Mostly just naive wrappers around common DOM API inconsistencies, Cross browser work is minimal and mostly taken from jQuery. This library doesn't do a lot to normalize behavior across browsers, it mostly seeks to provide a common interface, and eliminate the need to write the same damn if (ie9) statements in every project.

For example on() works in all browsers ie9+ but it uses the native event system so actual event oddities will continue to exist. If you need robust cross-browser support, use jQuery. If you are just tired of rewriting:

if (document.addEventListener)
  return (node, eventName, handler, capture) =>
    node.addEventListener(eventName, handler, capture || false)
else if (document.attachEvent)
  return (node, eventName, handler) =>
    node.attachEvent('on' + eventName, handler)

over and over again, or you need a ok getComputedStyle polyfill but don't want to include all of jQuery, use this.

dom-helpers does expect certain, polyfillable, es5 features to be present for which you can use es5-shim where needed

The real advantage to this collection is that any method can be required individually, meaning bundlers like webpack will only include the exact methods you use. This is great for environments where jQuery doesn't make sense, such as React where you only occasionally need to do direct DOM manipulation.

All methods are exported as a flat namesapce

var helpers = require('dom-helpers')
var offset = require('dom-helpers/offset')

// style is a function
require('dom-helpers/css')(node, { width: '40px' })
  • dom-helpers
    • ownerDocument(element): returns the element's document owner
    • ownerWindow(element): returns the element's document window
    • activeElement: return focused element safely
    • querySelectorAll(element, selector): optimized qsa, uses getElementBy{Id|TagName|ClassName} if it can.
    • contains(container, element)
    • height(element, useClientHeight)
    • width(element, useClientWidth)
    • matches(element, selector)
    • offset(element) -> { top: Number, left: Number, height: Number, width: Number}
    • offsetParent(element): return the parent node that the element is offset from
    • position(element, [offsetParent]: return "offset" of the node to its offsetParent, optionally you can specify the offset parent if different than the "real" one
    • scrollTop(element, [value])
    • scrollLeft(element, [value])
    • scrollParent(element)
    • addClass(element, className)
    • removeClass(element, className)
    • hasClass(element, className)
    • toggleClass(element, className)
    • style(element, propName) or style(element, objectOfPropValues)
    • getComputedStyle(element) -> getPropertyValue(name)
    • animate(node, properties, duration, easing, callback) programmatically start css transitions
    • transitionEnd(node, handler, [duration], [padding]) listens for transition end, and ensures that the handler if called even if the transition fails to fire its end event. Will attempt to read duration from the element, otherwise one can be provided
    • addEventListener(node, eventName, handler, [options]):
    • removeEventListener(node, eventName, handler, [options]):
    • listen(node, eventName, handler, [options]): wraps addEventlistener and returns a function that calls removeEventListener for you
    • filter(selector, fn): returns a function handler that only fires when the target matches or is contained in the selector ex: on(list, 'click', filter('li > a', handler))
    • requestAnimationFrame(cb) returns an ID for canceling
    • cancelAnimationFrame(id)
    • scrollbarSize([recalc]) returns the scrollbar's width size in pixels
    • scrollTo(element, [scrollParent])

Keywords

FAQs

Last updated on 26 Apr 2021

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc