Minimal selector engine

ironboy

10-07-2011, 10: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) :
style.appendChild(document.createTextNode(sel));
document.getElementsByTagName('head')[0].appendChild(style);
var elsAll = document.getElementsByTagName('*'), els = [];
for(var i = 0; i < elsAll.length; i++){
elsAll[i].offsetLeft < -10000 && els.push(elsAll[i]);
};
style.parentNode.removeChild(style);
els.each = function(func){
for(var i = 0; i < this.length;i++){func.call(this[i])}
};
return els
};

jmrker

10-08-2011, 04: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?

ironboy

10-08-2011, 11:18 AM

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, 08: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];}

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

ironboy

10-09-2011, 09: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, 05: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:

<html><head>
<title> ez css selectors</title>
<script>
//helpers:
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>

</head>
<body>
<ul>
<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>
</ul>

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

</body>
</html>