javascript IE11 和 querySelector 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34088938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE11 and querySelector issue
提问by Slayner
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 Pelements (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).
我进入了一个 DIV 内的我的页面，其中一些文本的内容是可编辑的。在本文中，我需要获取所有P元素的值（用户编写的文本），但我需要排除所有跨度元素（我必须做的其余工作中未使用的变量）。
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 :
我试图在 IE11 中使用 querySelector 来做到这一点，但这里是交易：对于 IE11 querySelector 不存在，即使我监视元素并且它告诉我这个方法存在（使用 F12 并在它上面放置一个间谍）。我该怎么做才能纠正？我尝试了我在这个论坛上找到的一些东西，据说要放：
<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 :
我用来执行此操作的 JS 是：
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
其中 edth_corps 是以编程方式生成的可编辑内容
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 ?
如果我以相同的条件（内容可编辑和其他东西）单独尝试它，它工作得很好并且可以满足我的需求。但是在我的应用程序中它失败了。那么这只是一个配置问题吗？还是我遗漏了什么？
采纳答案by Simba
You stated that the document mode is 5.
你说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.
这意味着 IE 正在以 Quirks 模式运行。此模式旨在模拟 IE5，因此它禁用了自 IE5 以来发明的大多数浏览器功能，包括querySelector.
You can resolve the problem by preventing the browser from going into Quirks Mode.
您可以通过阻止浏览器进入 Quirks 模式来解决该问题。
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:
这是通过确保 (1) 你的 HTML 是有效的，以及 (2) 它有一个有效的 doctype 声明作为第一行来实现的。如果您没有 doctype，请将以下内容添加到代码顶部：
<!DOCTYPE html>
回答by mplungjan
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
IE10 AND IE11 AND EDGE 中的输出
