ampersand-dom
Super light-weight DOM manipulation lib.
Last updated 5 years ago by gar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ampersand-dom 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.5.0                                ...           latest (5 years ago)

16 Versions

  • 1.5.0                                ...           5 years ago
  • 1.4.0                                ...           6 years ago
  • 1.3.0                                ...           6 years ago
  • 1.2.7                                ...           6 years ago
  • 1.2.6                                ...           6 years ago
  • 1.2.5                                ...           6 years ago
  • 1.2.4                                ...           6 years ago
  • 1.2.3                                ...           6 years ago
  • 1.2.2                                ...           6 years ago
  • 1.2.1                                ...           6 years ago
  • 1.2.0                                ...           6 years ago
  • 1.1.0                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
  • 0.1.2                                ...           6 years ago
  • 0.1.1                                ...           6 years ago
  • 0.1.0                                ...           6 years ago

Copyright 2014 - 2016 © taobao.org |