Question

我使用此方法来转义客户端的HTML代码字符串：

function escapeHTML(str)
{
   var div = document.createElement('div');
   var text = document.createTextNode(str);
   div.appendChild(text);
   return div.innerHTML;
};

我有点担心内存泄漏，因为我正在创建DOM元素而不是破坏它。该页面非常Ajax，并且很少刷新，因此可能会有数百次调用该方法而没有页面重新加载，这意味着这些对象将堆积起来，从而减慢DOM的数量（例如使用jQuery）

我尝试使用document.removeChild(div)，但IE给出了错误“htmlfile：无效的参数。”

有什么想法吗？

谢谢，安德烈

Answer 1

您需要在元素本身上调用removeChild：

function escapeHTML(str) {
   var div = document.createElement('div');
   var text = document.createTextNode(str);
   div.appendChild(text);
   var escapedHTML = div.innerHTML;
   div.removeChild(text);
   return escapedHTML;
}

要记住的一件事是，此解决方案在某些浏览器中存在怪癖（例如处理newlines =“\ n”）。在Prototype.js中，我们explicitly check for some of these quirks并适当地调整逻辑。

当然不用说你应该使用特征检测，而不是浏览器嗅探;）

每次调用函数时，您也不需要创建新元素。只需将其存放在封闭物中即可。例如：

var escapeHTML = (function(){

  var div = document.createElement('div');
  var text = document.createTextNode('');

  div.appendChild(text);

  return function(str) {
    text.data = str;
    return div.innerHTML;
  };
})();

如果你采用这种方法并永久保留元素，你也可以考虑在页面卸载时清除（即null），以防止可能的泄漏。

不幸的是，仅仅在许多浏览器中注册卸载事件处理程序会阻止快速导航（也称为页面缓存）。大多数JS库已经为清理目的观察了这个事件，所以如果你使用它（例如Prototype.js，jQuery，YUI），你不应该担心它 - 无论如何都会禁用页面缓存。

否则，您可能需要重新考虑您的选项，并始终在运行时创建元素，或者完全采用不同的解决方案（例如基于String.prototype.replace的解决方案）：

function escapeHTML(str) {
  return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

哦，最后，你不需要放置“;”在函数声明之后;它是函数表达式，建议以分号结束：）

Answer 2

如果你加载了jQuery，你可以使用remove method。

Answer 3

DOM：

var node = document.getElementById('node_to_delete');
node.parentNode.removeChild(node);

jQuery的：

$('#node_to_delete').remove();

Answer 4

你不应该关心，因为JS是垃圾收集的。如果这是一个大问题，你可以尝试使用名为setTimeout()的块来解析，间隔很短。

从DOM中删除元素

4 个答案: