Question

I want to be able to get the first matching element, then the second, and so on, for the following CSS selector:

[att]

The below selectors are not valid CSS3 selectors, but that is what I’m trying to accomplish:

   [att][0]
   [att][1]
   ...
   [att][n]

Can I combine multiple selectors and iterate over each matching node just like the example above?

[att1],[att2]

If this can’t be done with native DOM or CSS3 selectors, then an XPath query is also an option.

Answer 1

If document.querySelectorAll() is an option, it will be very easy — just pass the selector and the browser will handle the rest:

var elms = document.querySelectorAll('[att]');

for (var i = 0; i < elms.length; ++i) {
    alert(elms[i].tagName);
}

It works with any CSS selector you pass it provided the browser supports it (which in this case any browser implementing the function should already do). So to pick elements that have either att1, att2 or both, use this as mentioned in the comments:

var elms = document.querySelectorAll('[att1], [att2]');