CODEWITHSUNDEEP
javascriptinternet-explorer
Slayner
Slayner

Reputation: 409

IE11 and querySelector issue

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 ?

Upvotes: 2

Views: 17418

Answers (2)

Simba
Simba

Reputation: 5022

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>

Upvotes: 2

mplungjan
mplungjan

Reputation: 177684

Why not something like

var spans = textRecup.querySelectorAll("span");
for (var i=0;i<span.length;i++) {
  spans[i].parentNode.removeChild(spans[i]);
}


window.onload = function() {
  document.getElementById("get").onclick = function() {
    var div = document.getElementById("cnt");
    var spans = div.querySelectorAll("span");
    for (var i = 0; i < spans.length; i++) {
      spans[i].parentNode.removeChild(spans[i]);
    }
    console.log(div.innerHTML);
  }
}
<div id="cnt" contenteditable>

  <p>Here is some text and a <span>span</span> more text<br/>
    Here is some text and a <span>span</span> more text<br/>
    Here is some text and a <span>span</span> more text<br/>
    Here is some text and a <span>span</span> more text<br/></p>
  
</div>
<input type="button" id="get" value="get" />

Output in IE10 AND IE11 AND EDGE

enter image description here

Upvotes: 0

Related Questions