Lightweight, modular DOM library
Lightweight, modular DOM library.
Browser targets are relatively modern browsers from IE9+, Chrome, Firefox, Safari and modern versions of Opera (post blink integration).
This library is not designed to be a drop-in replacement for jquery, it is designed to provide a modular library that is jqueryesque therefore it is best suited to new projects.
Work in progress: not yet ready for production.
npm i air --save
Whilst the API is similar to jquery some notable design decisions:
To get a feel for how lightweight
air is see air.js, the core of the system is less than 100 lines of code (with comments). All other files in lib are plugins that should be loaded depending upon your application requirements.
var $ = require'air';$pluginrequire'air/event'
Note that the plugins are namespaced to prevent potential collisions when an application is using multiple plugin-enabled components.
The main function
air wraps a set of elements in a class that may be decorated by plugins.
Core functionality is the main method, the class function and the pre-defined properties and methods on the class, see air.js.
Reference to the
Accepts a selector
Air instance or array of elements.
context argument is only applicable when a selector
String argument is used and should reference the parent
Element context for
When an existing
Air instance is passed the underlying array is copied but the elements are not cloned.
var $ = require'air';$'body'; // String (selector)$documentquerySelector'body'; // Element$documentgetElementById'id'; // Element$documentquerySelectorAll'div'; // NodeList$documentgetElementById'id'; // Array$$'body'; // Air
The underlying array of elements.
The number of encapsulated elements.
Get the element at the specified index, if no arguments are passed the
dom array is returned.
Iterate the underlying elements, alias for
Alias to the main
air function, allows instance methods to wrap elements using
Alias to the
plugin function, allows instance methods to load plugins via
Default plugins that may be loaded on demand, syntax examples assume that
air has been aliased to
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
$selector contextattrname;$selector contextattrname value;$selector contextattrattributes;
Get the children of each element in the set of matched elements.
Plugin groups provide a convenient way to load related plugins.
Element attribute plugins.
Some features available in jquery that there are no plans to implement.
Accessing the underlying DOM elements using array bracket notation
 is not available, if you wish to access the encapsulated elements use the core methods.
Whilst jquery allows HTML parsing (eg:
$('<p></p>')) this library does not support it and there are no plans to implement this functionality, the rationale is:
Note that recent jquery versions now recommend
$.parseHTML rather than passing markup to
This is deemed to be irrelevant to DOM manipulation and is best left to one of the many capable libraries available.
data plugin allows manipulating the
data- attributes of an element but does not store any data on the element itself. If you wish to maintain data as part of your application it would be best resolved using another pattern (eg: storage).
If you really need to assign arbitrary data to an element you can always do so by directly setting properties on the element.
Designed to work with
HTML documents the behaviour when modifying
XML documents is undefined.
The jquery library extends CSS selectors with pseudo-selectors such as
:checked, we believe this is unnecessary as all selector extension functionality can be achieved using other means.
We aim to provide a single way to perform a task, the jquery library often provides multiple ways to achieve the same thing, for example:
air library will usually prefer the shorter and most common variant and not supply the alternatives; using the above examples the equivalent functions are
Whilst the jquery dimension methods (
innerWidth() etc.) allow setting element dimensions we prefer (for the sake of simplicity) to make these read-only as you can already set element dimensions using the
css plugin. It is possible that this may change in the future.
Developer workflow is via gulp but should be executed as
npm scripts to enable shell execution where necessary.
Run the headless test suite using phantomjs:
To run the tests in a browser context open test/index.html.
Run the test suite and generate code coverage:
npm run cover
npm run lint
Remove generated files:
npm run clean
Create distribution builds in dist:
npm run dist
Compile the test specifications:
npm run spec
Generate instrumented code from
npm run instrument
Generate the project readme file (requires mdp):
npm run readme
Generated by mdp(1).