Skip to content

Fast and lightweight querySelector[All]/getElementsByClassName/matchesSelector

Notifications You must be signed in to change notification settings

termi/CSS_selector_engine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Fast and lightweight querySelector[All]/getElementsByClassName/matchesSelector

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published