[Sommaire] [Imprimer]

   1  /** document.getElementsBySelector(selector)
   2     - returns an array of element objects from the current document
   3       matching the CSS selector. Selectors can contain element names, 
   4       class names and ids and can be nested. For example:
   5       
   6         elements = document.getElementsBySelect('div#main p a.external')
   7       
   8       Will return an array of all 'a' elements with 'external' in their 
   9       class attribute that are contained inside 'p' elements that are 
  10       contained inside the 'div' element which has id="main"
  11  
  12     New in version 0.4: Support for CSS2 and CSS3 attribute selectors:
  13     See http://www.w3.org/TR/css3-selectors/#attribute-selectors
  14  
  15     Version 0.4 - Simon Willison, March 25th 2003
  16     -- Works in Phoenix 0.5, Mozilla 1.3, Opera 7, Internet Explorer 6, Internet Explorer 5 on Windows
  17     -- Opera 7 fails 
  18  */
  19  
  20  /** 
  21   * Returns all children of element. Workaround required for IE5/Windo
  22   */
  23  function getAllChildren(e) {
  24    // Returns all children of element. Workaround required for IE5/Windows. Ugh.
  25    return e.all ? e.all : e.getElementsByTagName('*');
  26  }
  27  
  28  /** 
  29   * returns an array of element objects from the current document
  30       matching the CSS selector. Selectors can contain element names, 
  31       class names and ids and can be nested. For example:
  32       
  33       <pre><tt>elements = $CSS('div#main p a.external')</tt></pre>
  34       
  35       Will return an array of all 'a' elements with 'external' in their 
  36       class attribute that are contained inside 'p' elements that are 
  37       contained inside the 'div' element which has id="main"
  38   */
  39  $CSS = function(selector) {
  40    // Attempt to fail gracefully in lesser browsers
  41    if (!document.getElementsByTagName) {
  42      return new Array();
  43    }
  44    // Split selector in to tokens
  45    var tokens = selector.split(' ');
  46    var currentContext = new Array(document);
  47    for (var i = 0; i < tokens.length; i++) {
  48      token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');;
  49      if (token.indexOf('#') > -1) {
  50        // Token is an ID selector
  51        var bits = token.split('#');
  52        var tagName = bits[0];
  53        var id = bits[1];
  54        var element = document.getElementById(id);
  55        if (tagName && element.nodeName.toLowerCase() != tagName) {
  56          // tag with that ID not found, return false
  57          return new Array();
  58        }
  59        // Set currentContext to contain just this element
  60        currentContext = new Array(element);
  61        continue; // Skip to next token
  62      }
  63      if (token.indexOf('.') > -1) {
  64        // Token contains a class selector
  65        var bits = token.split('.');
  66        var tagName = bits[0];
  67        var className = bits[1];
  68        if (!tagName) {
  69          tagName = '*';
  70        }
  71        // Get elements matching tag, filter them for class selector
  72        var found = new Array;
  73        var foundCount = 0;
  74        for (var h = 0; h < currentContext.length; h++) {
  75          var elements;
  76          if (tagName == '*') {
  77              elements = getAllChildren(currentContext[h]);
  78          } else {
  79              elements = currentContext[h].getElementsByTagName(tagName);
  80          }
  81          for (var j = 0; j < elements.length; j++) {
  82            found[foundCount++] = elements[j];
  83          }
  84        }
  85        currentContext = new Array;
  86        var currentContextIndex = 0;
  87        for (var k = 0; k < found.length; k++) {
  88          if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) {
  89            currentContext[currentContextIndex++] = found[k];
  90          }
  91        }
  92        continue; // Skip to next token
  93      }
  94      // Code to deal with attribute selectors
  95      if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) {
  96        var tagName = RegExp.$1;
  97        var attrName = RegExp.$2;
  98        var attrOperator = RegExp.$3;
  99        var attrValue = RegExp.$4;
 100        if (!tagName) {
 101          tagName = '*';
 102        }
 103        // Grab all of the tagName elements within current context
 104        var found = new Array;
 105        var foundCount = 0;
 106        for (var h = 0; h < currentContext.length; h++) {
 107          var elements;
 108          if (tagName == '*') {
 109              elements = getAllChildren(currentContext[h]);
 110          } else {
 111              elements = currentContext[h].getElementsByTagName(tagName);
 112          }
 113          for (var j = 0; j < elements.length; j++) {
 114            found[foundCount++] = elements[j];
 115          }
 116        }
 117        currentContext = new Array;
 118        var currentContextIndex = 0;
 119        var checkFunction; // This function will be used to filter the elements
 120        switch (attrOperator) {
 121          case '=': // Equality
 122            checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };
 123            break;
 124          case '~': // Match one of space seperated words 
 125            checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); };
 126            break;
 127          case '|': // Match start with value followed by optional hyphen
 128            checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };
 129            break;
 130          case '^': // Match starts with value
 131            checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };
 132            break;
 133          case '$': // Match ends with value - fails with "Warning" in Opera 7
 134            checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };
 135            break;
 136          case '*': // Match ends with value
 137            checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };
 138            break;
 139          default :
 140            // Just test for existence of attribute
 141            checkFunction = function(e) { return e.getAttribute(attrName); };
 142        }
 143        currentContext = new Array;
 144        var currentContextIndex = 0;
 145        for (var k = 0; k < found.length; k++) {
 146          if (checkFunction(found[k])) {
 147            currentContext[currentContextIndex++] = found[k];
 148          }
 149        }
 150        // alert('Attribute Selector: '+tagName+' '+attrName+' '+attrOperator+' '+attrValue);
 151        continue; // Skip to next token
 152      }
 153      // If we get here, token is JUST an element (not a class or ID selector)
 154      tagName = token;
 155      var found = new Array;
 156      var foundCount = 0;
 157      for (var h = 0; h < currentContext.length; h++) {
 158        var elements = currentContext[h].getElementsByTagName(tagName);
 159        for (var j = 0; j < elements.length; j++) {
 160          found[foundCount++] = elements[j];
 161        }
 162      }
 163      currentContext = found;
 164    }
 165    return currentContext;
 166  }
 167  
 168  /* That revolting regular expression explained 
 169  /^(\w+)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/
 170    \---/  \---/\-------------/    \-------/
 171      |      |         |               |
 172      |      |         |           The value
 173      |      |    ~,|,^,$,* or =
 174      |   Attribute 
 175     Tag
 176  */