get-element
v0.1.1
Published
utility functions to get HTML elements
Downloads
19
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
jQueryjust to select elements is like using a flamethrower to light a birthday candle - Because
document.querySelector()is slow - Because
HTMLCollectionsare cool and all, but I usually want an actualArrayto 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-elementget-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> ]