querySelectorAll alternative for IE

Asked 23/8, 2013 at 13:40 Answered 7/6, 2020 at 13:32

I'm running some javascript which uses this:

controls = document.querySelectorAll("input,textarea,button");

It should work on IE 9 (which is the version that the developers and the client use). But in our project we use some really old web components that only work properly on compatibility mode. And querySelectorAll only works on standards mode from what i found after some research.

Is there any alternative?

EDIT: it works fine on Chrome and FF

Antony answered 23/8, 2013 at 13:40 Comment(3)

How about a pollyfill gist.github.com/branneman/1200441 or fixing the broken stuff. :) – Calyx 23/8, 2013 at 13:43

+1 for 'fixing broken stuff'... you cannot rely on things being broken, and then expect them to work correctly. – Cauthen 23/8, 2013 at 14:13

I gave +1 for "fixing broken stuff" as well. We COULD, but actually, we can't. Not at the present moment. This system was made using .net framework 1.1...last year we upgraded to 2.0. Originally, it was supposed to run only on IE...but we've been asked to make it multi-browser...but even on chrome and firefox some stuff is broken. It's a really old system...even the slightest change could make it go haywire. Not joking on this one.... – Antony 23/8, 2013 at 14:27

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.

Capias answered 23/8, 2013 at 14:2 Comment(4)

Unfortunatelly it's a huge system...rewriting it is a no-go XD. And i'm really positive that some of our components were discontinued...so yeah...sometimes we are stuck...like a lot. – Antony 23/8, 2013 at 14:33

You haven't described much about the components in question, but if we're talking compat mode (as opposed to quirks mode), there really shouldn't be much about it that could break by moving from compat mode to standards mode. Especially if it is known to work in current versions of Firefox and Chrome. My guess is that if there is a problem with it that breaks in standards mode, it is likely to be fairly easy to fix. Do you have the source code? It bet it wouldn't be difficult. But in any case if they've been discontinued, a responsible business should be considering replacing them anyway. – Capias 23/8, 2013 at 14:43

your answer is just useless. It is obvious that if he upgrade the support to IE 9+ versions he wont have this problem. – Claqueur 13/1, 2016 at 11:43

If works fine, why something.querySelectorAll(".navbar-inner:not(.cached)") throws a Syntax Error? ¬¬ – Intrigante 19/12, 2017 at 17:39

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.

Antony answered 23/8, 2013 at 14:31 Comment(1)

and if you want textarea and button selected, do again, 3 times. – Bigener 15/3, 2022 at 12:51

according MDN

There is also an Internet Explorer-compatible way to use Array.prototype.forEach for iteration:

const list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {
  checkbox.checked = true;
});

is that you trying to do?

Convulsant answered 7/6, 2020 at 13:32 Comment(0)

Recommended topics

Hot tags