Question

我在DIV中的页面上，内容可以在某些文本上编辑。在本文中，我需要获取所有P元素的值（由用户编写的文本），但我需要排除所有span元素（不用于我必须完成的其余工作的变量）。

我试图在IE11中使用querySelector来实现它，但这里是交易：对于IE11，querySelector不存在，即使我监视元素并告诉我这个方法存在（使用F12并在其上放一个间谍）。我该怎么做才能纠正这个问题？我尝试过在这个论坛上找到的东西，比如说：

<meta http-equiv="X-UA-Compatible" content="IE=11" />

在文档的头部，但它没有用。

我用来做这个的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;
}

编辑：

他是这样打来的电话：

var text = recupTXT(document.getElementById('edth_corps'));

其中edth_corps是内容可编辑生成的programmaticaly

如果我在一个独立的地方尝试它，具有相同的条件（内容可编辑和东西），它工作得很好，并做我需要的。但在我的应用程序中它失败了。那么它只是一个配置问题吗？还是有什么我想念的？

Answer 1

您声明document mode is 5。

这意味着IE在Quirks模式下运行。此模式旨在模拟IE5，因此它禁用了自IE5以来发明的大多数浏览器功能，包括querySelector。

您可以通过阻止浏览器进入Quirks模式来解决问题。

这是通过确保（1）您的HTML有效，以及（2）它具有有效的doctype声明作为第一行来实现的。如果您没有doctype，请在代码顶部添加以下内容：

<!DOCTYPE html>

Answer 2

为什么不喜欢

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" />

IE10和IE11 AND EDGE中的输出

IE11和querySelector问题

2 个答案: