Sharovatov’s Weblog

Selectors API support in IE8b1

Posted in browsers, css, javascript by sharovatov on 6 April 2008

As I mentioned in the previous post, IE8b1 introduced support for very powerful DOM accessing concept — Selectors API. It is still a W3C working draft, but I bet that as IE and Webkit already support it, Presto and Gecko will soon have it as well.

So what do we have? As per the spec, we have 2 methods: .querySelector() and .querySelectorAll() which can be applied to any HTMLElement and based on he parameter (CSS selectors string) provided return an Element or StaticNodeList populated with elements matching the provided CSS selectors. Bottom line, you give it CSS selector, they return you matching element(s).

It provides you with a new flexible way to select elements in DOM. We can do any weird and wonderful stuff we want with the power of JS combined with the flexibility of CSS selectors:

  1. Get all paragraphs with the .note classname from one div? Not a problem – document.querySelectorAll('#myDiv .note');
  2. Get all elements with some classname? Forget about document.getElementsByClassName slow kludges — use document.querySelectorAll('.myClass');
  3. Get a link with .current classname from your UL-based menu? document.querySelector('#menu .current');

So generally we don't have to iterate over huge StaticNodeLists anymore — it's done natively and very fast (much faster then by JS libraries). Please see the testcase prepared by Webkit authors to measure their Selectors API support — it works in IE8b1 except for CSS3 Selectors block (IE8b1 doesn't support CSS3 :nth- and :last-child selectors).

Bottom line, Selectors is a way to find elements in DOM. All browsers know how do it already when they parse CSS rules and find elements to which these rules have to be applied. So it's just an existing browser functionality exposed to the developer. And we have to keep in mind that if browser supports a CSS selector, it will allow you to query for this element using Selectors API. And obviously if there's no support for some CSS selector, you won't be able to get this element using Selectors.

For example, as IE8b1 doesn't support :last-child CSS3 selector, you can't style such elements in CSS and you can't query them using Selectors.

Notes:

  1. Unfortunately, IE8b1 doesn't fully implement the Selectors API spec. Here's the MSDN article quotation:

    Because Internet Explorer 8 does not formally support XHTML documents, it does not support the namespace features of the W3C Selectors API specification, such as the NSResolver parameter.

    But for websites where namespaces are not used it's not gonna be of any problem.

  2. Another interesting issue that Selectors API spec raises is a potential history theft.

    Basically you can get all visited links hrefs and send them by AJAX somewhere (just a matter of getting a StaticNodeList of elements by doing document.querySelectorAll("a:visited")).

    Spec leaves it for the vendor to fix. So IE8b1 ignores the :visited and :link selectors when they appear in the selector query criteria.

Please see the Testcase

2 Responses

Subscribe to comments with RSS.

  1. […] April 2009 at 7:12 am · Filed under no category Back in April 2008 I was blogging about Selectors API support in IE8 Beta 1 support and mentioned the security concern about :visited links – potential privacy […]

  2. seo high wycombe said, on 17 July 2013 at 9:46 am

    Pretty component of content. I just stumbled upon
    your blog and in accession capital to say that I acquire in
    fact enjoyed account your blog posts. Anyway I
    will be subscribing to your feeds and even I fulfillment
    you get entry to consistently rapidly.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: