DOM操作后TextContent的長度不變

Question

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代碼中的錯誤嗎？

Answer 1

代碼中的錯誤，是在調整JSFiddle時發現的。 兩個聽眾正在互動。

按下Backspace鍵時，Chrome不會觸發按鍵事件。 Firefox確實如此。

看到它發生在這里http://jsfiddle.net/dx7Dy/11/我向兩個偵聽器添加了日志代碼。

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