IE11 and querySelector issue

2019-07-07 19:03发布

站内问答 / JavaScript
1110 2 6

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 ?

2条回答
走好不送
2楼-- · 2019-07-07 19:28

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>
查看更多
0人赞 添加讨论(0) 举报
女痞
3楼-- · 2019-07-07 19:40

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)