View Full Version : Minimal selector engine

10-07-2011, 11:13 PM
In answering different questions here I often find myself reinventing the wheel when it comes to how to select elements, using rigid DOM methods like selectElementsByTagName etc.

I do that because I understand that you can't expect people to have jQuery or a similar library installed.

Still I suspect it would be easier and make the rest of the code clearer when answering a question/writing an example if a small selector engine was included:

function $(sel){
// ironboy: a minimal selector engine (for use in teaching)
sel = '* {display:block !important; position:absolute !important;'
+ ' left:0}\n' + sel + ' {left:-10050px !important}';
var style = document.createElement('style');
style.type = 'text/css';
style.styleSheet ? (style.styleSheet.cssText = sel) :
var elsAll = document.getElementsByTagName('*'), els = [];
for(var i = 0; i < elsAll.length; i++){
elsAll[i].offsetLeft < -10000 && els.push(elsAll[i]);
els.each = function(func){
for(var i = 0; i < this.length;i++){func.call(this[i])}
return els

10-08-2011, 05:13 AM
The code looks interesting.

Do you have an example of how it would be used?
Or a reference to a forum thread where you used it for it's intended purposes?

10-08-2011, 12:18 PM
No - I haven't used it in any forum thread yet. I'm not sure if it would be a good idea for newbies or not. It is just a selector library - like Sizzle in jQuery - but infinitely smaller (and slower - thus not for real production). So we can do:

$('#somethingById, .someOtherthingByClass, orByTag').each(function(){
// do something with each element, for example change innerHTML
this.innerHTML = 'Hello'

rnd me
10-09-2011, 09:56 AM
ie7 is the last popular browser that doesn't support document.querySelectorAll(), so the need for hacks should dissipate by the end of the year as ie7 drops under the 5% it's at now...

for me, jQuery is written:

function $(css, root){
return [].slice.call((root||document).querySelectorAll(css));

then, with a few helper pure functions, it's easy:

function hide(elm){elm.style.display='none';}
function show(elm){elm.style.display=null;}
function attr(elm){return elm[this];}

$("p").map(hide); //hides all paragraphs
$("a").map(attr, "href") //get an array of all link's urls...

10-09-2011, 10:39 AM
Cool, I'll try to integrate that :cool::D - I suspect people will ask for ie7 support a while longer than < 5% :(

rnd me
10-10-2011, 06:22 PM
Cool, I'll try to integrate that :cool::D - I suspect people will ask for ie7 support a while longer than < 5% :(

a sneaky way around that: make older ie users wait a bit longer, and use jQuery for them and only them:

<title> ez css selectors</title>
function hide(elm){elm.style.display='none';}
function show(elm){elm.style.display=null;}

//css query engine:
$=function $(css, root){
return Array.prototype.slice.call((root||document).querySelectorAll(css));

//add [].map, filter, JSON, ETC for all IE8 and worse users:
if("\v"=="v"){document.write("<"+"script src='http://danml.com/f/'><\/script>");}

//ie7 and worse uses jQuery as a css query fallback:
if("\v"=="v"){document.write("<"+"script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'><\/script>");}</script>
<script>if("\v"=="v"){window.$=function(css, root){ return jQuery(css,root).toArray(); }}</script>

<li>item odd</li>
<li>item even</li>
<li>item odd</li>
<li>item even</li>
<li>item odd</li>
<li>item even</li>
<li>item odd</li>
<li>item even</li>
<li>item odd</li>

//test selector engine:
$("ul li:nth-child(even)").map(hide);