Fast and lightweight querySelector[All]/getElementsByClassName/matchesSelector
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__COMPILED Bugfixing Oct 14, 2012
__SRC Bugfixing Oct 14, 2012
speed Bugfixing Oct 14, 2012
test Refactoring, bugfixing, unit tests and benchmark Oct 14, 2012
.gitignore Initial commit Aug 21, 2012
.gitmodules Refactoring, bugfixing, unit tests and benchmark Oct 14, 2012
README.md Refactoring, bugfixing, unit tests and benchmark Oct 14, 2012

README.md

Super fast css selector engine with CSS4 selector API support

Goal

  • Support CSS3 as well as part of CSS4 selector API
  • Be lightweight
  • Be fastest
  • Be customizable
  • Optimised for IE < 8

Shims

  • document.querySelector
  • document.querySelectorAll
  • document.getElementsByClassName for IE < 9
  • document.documentElement.querySelector
  • document.documentElement.querySelectorAll
  • document.documentElement.getElementsByClassName
  • document.documentElement.matchesSelector
  • document.documentElement.matches
  • Element.prototype.querySelector
  • Element.prototype.querySelectorAll
  • Element.prototype.getElementsByClassName for IE < 9
  • Element.prototype.matchesSelector
  • Element.prototype.matches

CSS4 Supporting selectors

Subject of a selector

document.querySelector("div! a[href*=twitter]");// div that has **a** element with _href_ attribute that contains "twitter"
document.querySelectorAll("body footer! div");// NodeList:[footer], if <footer> is in <body> and <footer> contains <div>

:scope pseudo-class

<div node>.querySelector("div:scope a");// if <div node>.tagName == "DIV" -> result is <a> element, child of <div node>
<node>.querySelectorAll(":scope>*");// all direct childs or <node>
document.documentElement.querySelector(":scope>*");// regulary would be <head>
document.documentElement.querySelector(":scope>*:nth-child(2n+1)");// regulary would be <head> also
document.documentElement.querySelector(":scope>*:nth-child(2n+2)");// regulary would be <body>

Note: :scope pseudo-class not in first compound selector not supported! This examples will throw "SYNTAX_ERR" exception:

document.querySelector("div div:scope a")

Reference combination

Working on it

Installation

  • Without IE6/7 support:

         <script src="__COMPILED/CSS_selector_engine.js"></script>
    
  • With IE6/7 support:

         <!--[if lt IE 8]>
     	<script src="__COMPILED/CSS_selector_engine.ielt8.js"></script>
     	<![endif]-->
     	<!--[if gt IE 7]><!-->
     	<script src="__COMPILED/CSS_selector_engine.js"></script>
     	<!--<![endif]-->
    

Using in IE < 8

var $$ = function(node, selector) {
    return document.documentElement.querySelectorAll.call(node, selector)
}
var $$0 = function(node, selector) {
    return document.documentElement.querySelector.call(node, selector)
}
var matchNode = function(node, selector) {
    return document.documentElement.matches.call(node, selector)
}

matchNode( $$(document, "div.class")[0], "div.class" ) == true

Customization

The are few GGC flags in script. You can set it as you need and compile script with GGC in ADVANCED_OPTIMIZATIONS mode.

  • Build for non-IE lt 8

    set the value of '__GCC__NOT_ONLY_IELT8_SUPPORT__' to 'true' and compile CSS_selector_engine.js using Google Closure Compiler

License

MIT