get-element
v0.1.1
Published
utility functions to get HTML elements
Downloads
2
Readme
About | Why | Installation | Usage | License
About
A tiny Node.js module for quickly selecting HTML elements.
Bundle it with browserify/webpack/etc.
Requires Node.js > 4.0
.
Why
- Because using
jQuery
just to select elements is like using a flamethrower to light a birthday candle - Because
document.querySelector()
is slow - Because
HTMLCollections
are cool and all, but I usually want an actualArray
to iterate over - Because I don't want to type
Array.prototype.slice.call(document.getElementsByClassName('aVeryNiceClassName'))
over and over again
Installation
Install and save to package.json
from terminal:
$ npm install --save get-element
get-element
is primarily intended for use with a bundler like webpack or browserify:
var getElement = require('get-element')
If you need a standalone <script>
, though, a minified browser build that attaches to the global namespace as getElement
is provided here:
<script src="get-element.min.js"></script>
Usage
get-element
exports two methods:
getElement.withClass(class, [from])
Returns an array of elements with the specified class.
from
is an optional parameter to specify a root element other than document
.
<!--index.html-->
<!doctype html>
<html>
<head></head>
<body>
<div class="foo">
<div class="bar"></div>
</div>
<section class="bar"></div>
<section class="bar"></div>
<script src="main.js"></script>
</body>
</html>
// main.js (pre-bundle)
var el = require('get-element')
var foo = el.withClass('foo')
// => [ <div.foo> ]
var bar = el.withClass('bar')
// => [ <div.bar>, <section.bar>, <section.bar> ]
var fooBar = el.withClass('bar', foo[0])
// => [ <div.bar> ]
getElement.withTag(tag, [from])
Returns an array of elements with the specified tag.
from
is an optional parameter to specify a root element other than document
.
<!--index.html-->
<!doctype html>
<html>
<head></head>
<body>
<div class="foo">
<div class="bar"></div>
</div>
<section class="bar"></div>
<section class="bar"></div>
<script src="main.js"></script>
</body>
</html>
// main.js (pre-bundle)
var el = require('get-element')
var body = el.withTag('body')
// => [ <body> ]
var divs = el.withTag('div')
// => [ <div.foo>, <div.bar> ]