Skip to content

codekirei/get-element

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

sugar to get HTML elements quickly

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published