Attribute selectors now supported

I’ve updated document.getElementsBySelector to support CSS2 and CSS3 attribute selectors, as described here. Attribute selectors allow you to match elements based on any attribute using a variety or different rules including begins-with, ends-with, contains and more. The new version is tested in Mozilla, Phoenix and IE5/Windows (and I’m almost certain it works in IE6). There is a slight bug in Opera 7 preventing the ends-with selector from working which I have been unable to track down—any Opera javascript experts out there?

It has been pointed out that the function does not have the capability to deal with chained selectors such as div#main.layoutDiv. I have no intention of supporting this kind of advanced CSS syntax—one of my principle design aims is to keep the code short and simple, and implementing a full parser would add a lot of bulk and complexity without significantly improving the utility of the function.

Posted 27th March 2003 at 1:05 pm

5 comments

Just to confirm for you, it does work in IE 6...esp after I remembered to Ctrl-F5.
gilmae - 27th March 2003 19:03 - #
Opera is fiddling with your link's URL. It's returning it without your end slash, meaning it's comparing "http://diveintomark.org" with "http://diveintomark.org/", and failing. It has a *very* nasty habit of mucking around with attribute values. URL attributes should always be returned *exactly* as they were set.
Tom Gilder - 28th March 2003 01:07 - #
Nice one. Recently been playing around with Mozilla / XUL / XPCom and SOAP ( see http://www.oreillynet.com/pub/a/javascript/synd/20 02/08/30/mozillasoapapi.html ) in an attempt to get a simple XUL app to talk to a PHP SOAP server. This looks like the missing piece I need - normally handling a SOAP response with JavaScript isn't pleasant. Will let you know if I get any joy.
Harry Fuecks - 28th March 2003 11:53 - #
It works fine in IE5.2 MacOSX and IE5.5 w2k. On safari1.0beta(v60) returns HTMLAnchorElement for all links, except for ".blog", due to Safari doesn't suport document.getElementsByTagName('*') - at least in this release.
kusor - 28th March 2003 15:36 - #

Hello Mr. Willison, and other users of this function,

I've found this function fantastically useful, and am a big fan of the Behaviour utilisation. I found what I think is a bug in your implementation, though; three and a half years later, care to see it and a suggested fix?

Here are your lines 92-102:

for (var h = 0; h < currentContext.length; h++) {
  var elements;
  if (tagName == '*') {
      elements = getAllChildren(currentContext[h]);
  } else {
      elements = 
        currentContext[h].getElementsByTagName(tagName);
  }
  for (var j = 0; j < elements.length; j++) {
    found[foundCount++] = elements[j];
  }
}

I've found this will cause an error in Behaviour if I attempt a rule such as this: #NonExistantElement childElement. The error arises from the 'else' branch in the code snippet above attempting to call getElementsByTagName from a null object, the NonExistantElement. I've used this as a solution:

for (var h = 0; h < currentContext.length; h++) {
  var elements = new Array;
  if (tagName == '*') {
      elements = getAllChildren(currentContext[h]);
  } else {
      //Handle the case where our currentContext does not exist,
        e.g. an errant element ID rule entered in a behaviour-sheet.
      if(currentContext[h]) elements =
        currentContext[h].getElementsByTagName(tagName);
  }
  for (var j = 0; j < elements.length; j++) {
    found[foundCount++] = elements[j];
  }
}

No context? No problem, just work with elements as a 0-length array.

This function's a great piece of work. Thanks for writing this version to begin with.

--Alex

Alex Nelson - 18th September 2006 19:47 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/03/27/attributeSelectorsNowSupported

Simon Willison’s Weblog

Attribute selectors now supported

5 comments