Socket
Socket
Sign inDemoInstall

ampersand-dom

Package Overview
Dependencies
1
Maintainers
5
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ampersand-dom

Super light-weight DOM manipulation lib.


Version published
Maintainers
5
Install size
145 kB
Created

Readme

Source

ampersand-dom

Minimal util-layer for applying transformations to DOM.

It's a pretty thin layer on top of DOM APIs.

It has zero dependencies.

install

npm install ampersand-dom

falsy values

When setting something to a falsy value: NaN, undefined, null, and false all become ''. However, 0 becomes "0" in order to allow setting 0 as the text content of an element.

example

Here are all the methods and their usage:


var dom = require('ampersand-dom');


// sets text content of element
dom.text(el, 'set text content');

// uses classList if available
dom.addClass(el, 'someclass');
dom.hasClass(el, 'someclass'); // => true
dom.removeClass(el, 'someclass');

// removes old if found, adds new
dom.switchClass(el, 'oldclass', 'newclass');

// makes sure attribute (with no content) is added
// if exists it will be cleared of content
dom.addAttribute(el, 'checked');

// returns true if that the element has an attribute with that name
dom.hasAttribute(el, 'checked'); // => true

// completely removes attribute
dom.removeAttribute(el, 'checked');

// sets attribute to string value given, clearing any current value
dom.setAttribute(el, 'value', 'the value');

// sets display none
dom.hide(el);

// hide takes a second parameter which changes
// the css property used to hide the element
// sets visibility hidden
dom.hide(el, 'visibility');

// shows element, trying to determine it's default display state
// based on tagname and getComputedStyle()
dom.show(el);

// show also takes a second parameter which changes
// the css property used to show the element
// sets visibility on element based on its previous value
dom.show(el, 'visibility');

// toggle display of element, between show/hide
dom.toggle(el);

// toggle also takes the same second parameter as show/hide
// which changes the css property used to show or hide
// the element
dom.toggle(el, 'visibility');

// sets inner HTML, takes string or DOM
dom.html(el, '<div></div>');

credits

Initially created by @HenrikJoreteg with much inspiration/discussion with @philip_roberts.

license

MIT

Keywords

FAQs

Last updated on 01 Feb 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

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

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc