Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts

    Minimal selector engine

    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:

    Code:
    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
    };
    Last edited by ironboy; 10-07-2011 at 10:40 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,078
    Thanks
    38
    Thanked 498 Times in 492 Posts
    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?

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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:
    Code:
    $('#somethingById, .someOtherthingByClass, orByTag').each(function(){
      // do something with each element, for example change innerHTML
      this.innerHTML = 'Hello'
    });

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    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:
    Code:
    function $(css, root){
      return [].slice.call((root||document).querySelectorAll(css));
    }
    then, with a few helper pure functions, it's easy:
    Code:
    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...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    ironboy (10-09-2011)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Cool, I'll try to integrate that - I suspect people will ask for ie7 support a while longer than < 5%
    Last edited by ironboy; 10-09-2011 at 09:42 AM.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    Quote Originally Posted by ironboy View Post
    Cool, I'll try to integrate that - 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:


    Code:
    <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>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •