从DOM中删除元素

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中,我们明确地检查了一些这些怪癖并适当地调整逻辑.

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

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

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;');
}

哦,最后,你不需要放置";" 在函数声明之后; 它是函数表达式,建议以分号结束:)