IE11 and querySelector issue

16,550

You stated that the document mode is 5.

This means that IE is running in Quirks Mode. This mode is designed to emulate IE5, and as a result it disables most of the browser features invented since IE5, including querySelector.

You can resolve the problem by preventing the browser from going into Quirks Mode.

This is achieved by making sure (1) that your HTML is valid, and (2) that it has a valid doctype declaration as the first line. If you don't have a doctype, add the following to the top of your code:

<!DOCTYPE html>

16,550

Author by

Slayner

Updated on June 04, 2022

Comments

Slayner almost 2 years
I got on my page inside a DIV with content editable on some text. In this text I need to get the value of all P elements (text written by user) but I need to exclude all span elements (variables that are not used for the rest of the work I have to do).

I tried to do it using querySelector in IE11 but here is the deal : For IE11 querySelector doesn't exist, even when I spy the element and it tell me this method exist (using F12 and putting a spy on it). What should I do to correct that ? I tried something I found on this forum that's say to put :
```
<meta http-equiv="X-UA-Compatible" content="IE=11" />
```
in the Head of the document, but it did not work.

The JS I use to do this is :
```
function recupTXT(div) {
  var textRecup = div.cloneNode(true);
  while (textRecup.querySelector("span") !== null) {
    textRecup.querySelector("span").parentNode.removeChild(textRecup.querySelector("span"));
  }
  return textRecup.innerText;
}
```
EDIT :

he is call like that :
```
var text = recupTXT(document.getElementById('edth_corps'));
```
where edth_corps is the content editable generated programmaticaly

If I try it on a stand alone, with the same condition (content editable and stuff), it work pretty fine and do what I need. But in my application it failed. So is it just a configuration issue ? or is there something I'm missing ?
Slayner over 8 years

because I got the same error : the object does not have the property or the method querySelectorAll. Even when I spy the object and see in his method that he got them.
Slayner over 8 years

already did and always get the same error message. For the Navigator the method querySelector and querySelectorAll does not exist for the object DispHTMLDivElement but when I look his methods I can see them
mplungjan over 8 years

So the code here when you run snippet gives you errors? Is your compatibility mode set in the browser settings perhaps?
Slayner over 8 years

your code works fine here, it's when I try it in my application that the errors appears
mplungjan over 8 years

Then there is something else wrong obviously. So please post more code here or in a fiddle - what do you mean by application btw? HTA?
Slayner over 8 years

well all the function is here, and the JS does like 8K line so i won't be able to show it here. I can add the call of this function if it might help. what is HAT ?
Ruan Mendes over 8 years

@Slayner, then you need to break down the problem into a small reproducible case.
Slayner over 8 years

well it can be really smaller then that. I have another funtion that work to get the text but it is poorly written and really big because they just use For and whil again and again to go througth all the children node. I had the code use to call this function, and the fact that the content editable is generated programmaticaly
Slayner over 8 years

Btw if the intranet option for compatibilty isn't check the site does not work
Slayner over 8 years

Thanks for pointing me in that direction, my doctype is : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
mplungjan over 8 years

Well then that sounds like a start.
Slayner over 8 years

Thanks a lot Simba, but know i have to go see my boss and tell them the webSite is so shitty it can't work above IE5 compatibility (it try it by changing the document type). So I guess i won't be staying long as an external ressources pointing out the failed of the regular employee.