search

keithclark / selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
1.71k stars 247 forks source link

Add support for [documet/node].querySelector[All] [polyfill] #41

Open termi opened 11 years ago

termi commented 11 years ago

Hi!

I am working on fast and lightweight replacement of Sizzle. It is a polyfill for IE6+ and w3c browsers to bring part of CSS4 selector API as well as CSS3 selector API.

The polyfill

Currently it support :scope, ! and nodesRef part from CSS4 Selector API:

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> in <body> and <footer> contains <div>
document.documentElement.querySelector(":scope>*");// regulary would be <head>
document.querySelector(":scope>*", document.documentElement);// the same result - <head>
document.documentElement.querySelector(":scope>*:nth-child(2n+1)");// regulary would be <head> also
document.querySelector(":scope>*:nth-child(2n+2)", document.documentElement);// regulary would be <body>

Polyfill patches native [documet/node].querySelector[All] methods and using native functions when it possible.

My proposal is to add support of [documet/node].querySelector[All] in Selectizr. For supporting IE < 8 selectivizr can take querySelector[All] from document.documentElement node:

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)
}