dom-info

A jQuery-alternative for retrieving info about rendered DOM nodes.

Background

Most UI frameworks provide a mechanism for maintaining state, so we no longer need to store state in the DOM like we did when all we had was jQuery. Furthermore, with modern UI libraries such as React, we also no longer need to manually update DOM nodes because we can re-render the entire DOM as a function of the updated state.

As a result, DOM libraries like jQuery, zepto.js, and others others feel even more bloated because they are filled with methods we no longer need. The only functions we do need are those that retrieve properties of DOM nodes that are the result of their render in the browser (e.g. dimensions, positions, etc.). These properties cannot be known prior to rendering.

dom-info, derived from various modules in the the open-source UIZE JavaScript Framework, is a lightweight alternative that only provides these utility functions. These functions are separated into individual modules so you can only include the ones you need.

Installation

Install via NPM:

npm install --save dom-info

Use with webpack or browserify:

import * as domnInfo from 'dom-info'; // ES6+
var domnInfo = require('dom-info'); // ES5

As a last resort, you can download dist/dom-info.min.js and include it on your web page via a <script> tag. It will create a global window.domInfo object (or define the module if you are using RequireJS):

<script src="/lib/dom-info.min.js" type="text/javascript"></script>

API Docs

• getDimensions - Gets the computed pixel dimensions for the specified DOM node, including padding, border, and optionally margin.
• getStyle - Returns the value of the specified style property (or style properties) for the specified node.
• supportsStyle - Returns whether or not the specified CSS property is supported in the current browser.

Check out the docs for more examples or try out dom-info in your browser!

Browser support

dom-info has been tested in Internet Explorer 9+, Chrome, Firefox, Safari, Opera and Edge. Some functionality may also work in older browsers, but is unsupported.

Project philosophy

We take the stability of this utility package very seriously. dom-info follows the SemVer standard for versioning. All updates must also keep the library lightweight by providing each piece of functionality in a separate module.

Contributing

Contributions are welcome! See CONTRIBUTING.md for more details.

License

MIT. Copyright (c) 2016 Ben Ilegbodu.