可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 ?

回答1:

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>

回答2:

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