sugar to get HTML elements quickly
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
__tests__
browser
.gitignore
.travis.yml
index.js
license
logo.png
package.json
readme.md

readme.md

get-element logo

Build Status Coverage Status

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 actual Array 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> ]

License

MIT