querySelectorAll alternative for IE
querySelectorAll works fine in IE9. It even works in IE8.
But it sounds like your problem is getting it to work specifically in quirks mode or compatibility mode.
If that's the problem then... well, the problem is the mode, not the feature. You need to get the site into standards mode, and then querySelectorAll will work.
The whole point of compatiblity mode is to make the browser emulate an older version of IE. The main way it does this is by disabling all the features that have been added since that version.
So basically what you're saying is "I've switched off half the features in my browser, how can I get one of those features working again?"
And the obvious answer is: switch the features back on again.
The way to do that is to make sure the browser is in standards mode.
You need to do two things:
Make sure you have a valid doctype, so you can avoid Quirks mode. If you don't have one, add
<!DOCTYPE html>to the very top of your code (above the<html>tag).Add the IE standards mode meta tag somewhere in your
<head>element:<meta http-equiv="X-UA-Compatible" content="IE=Edge" />This will force IE to use the best mode it has available -- so IE9 will be in IE9 standards mode, etc.
You should make sure both of the above are in all pages in your site.
[EDIT]
You mention that you're relying on an old component that only works in compatiblity mode.
The basic answer is that you're not going to be able to use querySelectorAll in the same site where you're stuck with compatibility mode. And there's a lot of other modern browser features you'll be missing out on too.
If possible, you should try to upgrade that component, or fix it to work in modern standards mode.
If you really can't get out of compatibility mode, then you are pretty much stuck.
Your only real option in this case is to switch to using a library like jQuery that has its own selector engine built in.
If you've already written your site without using jQuery, then it's a pretty ugly thought to have to rewrite everything to use it, but that's probably the only option you have.
Well, after some search, i ended up using this:
if( navigator.userAgent.indexOf("MSIE") != -1 ) {
controls = document.getElementsByTagName('input');
}else{
controls = document.querySelectorAll("input,textarea,button");
}
It works. I'll do some more testing hoping that it will work xD.