DOM 操作后 TextContent 长度不会改变答案

【问题标题】：TextContent length doesn't change after DOM manipulationDOM 操作后 TextContent 长度不会改变
【发布时间】：2014-01-05 08:53:01
【问题描述】：

在 DOM 操作后，我在 Firefox 中看到了奇怪的行为。更改 TextNode 的内容不会更新其属性。例如。删除字符不会更新 textContent 的长度。

这里是 HTML

<p>Input:</p>
<div> <span id="cursor"></span></div>
<p>Results:</p>
<ul id="result"></ul>

还有 JavaScript

var cursor = document.getElementById("cursor"),
    result = document.getElementById("result");

window.addEventListener('keydown', function(e) {
  //Backspace event
  if (e.which == 8) {
    cursor.previousSibling.textContent = cursor.previousSibling.textContent.substring(0, cursor.previousSibling.textContent.length - 1);
  }
}, true);

//Capture key press and write character to TextNode
window.addEventListener('keypress', function(e) {
  cursor.previousSibling.textContent = cursor.previousSibling.textContent + String.fromCharCode(e.which);
}, true);

在http://jsfiddle.net/dx7Dy/9/ 测试此代码

在 Chrome 中，它按预期工作，因为您键入的 div 中充满了字母。退格删除最后一个字符。

在 Firefox 中，第一个退格后，最后一个字符被删除，但 TextNode 的 textContent 长度没有更新。

我在删除 TextNode（node.remove() 和 parentNode.removeChild(node)）时也遇到了同样的问题。它的内容被清空了，但该节点仍保留在 DOM 中，因此下一个 remove() 只是尝试删除相同的空节点，使其为空并再次原位。

这仅在通过事件侦听器触发时发生。例如，如果我通过 Firebug 控制台操作 DOM，一切都会按预期进行。

这是 Firefox 代码中的错误吗？

【问题讨论】：

标签： javascript firefox dom cross-browser

【解决方案1】：

代码中的错误，在调整 JSFiddle 时发现。两个听众正在互动。

当按下退格键时，Chrome 不会触发 keypress 事件。 Firefox 可以。

看到它发生在这里http://jsfiddle.net/dx7Dy/11/ 我将日志代码添加到两个侦听器。

result.insertAdjacentHTML("beforeend", "<li>"+cursor.previousSibling.textContent + " " + cursor.previousSibling.textContent.length + "</li>");

【讨论】：