从DOM中删除一个元素 [英] Removing an element from DOM

问题描述

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

 函数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：无效的参数。

任何想法？

谢谢，
Andrey

解决方案

您需要在一个元素上调用 removeChild ：

 函数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 =\\\
）。在Prototype.js中，我们明确检查其中的一些怪癖并适当地调整逻辑。

当然，不用说，您应该使用功能检测，而不是浏览器嗅探;）

您也不需要每次调用函数创建新元素。简单地将其存储在封闭物中。例如：

  var escapeHTML =（function（）{
 
 var div = document.createElement 'div'）; 
 var text = document.createTextNode（''）; 
 
 div.appendChild（text）; 
 
返回函数（str）{
 text.data = str; 
 return div.innerHTML; 
}; 
}）（）; 
  

如果您采用这种方法并永久保持元素，您也可以考虑清理

不幸的是，只注册卸载事件（即， null ing）许多浏览器中的处理程序阻止快速导航（又称页面缓存）。大多数JS库已经观察到这个事件用于清理，所以如果你使用一个（例如Prototype.js，jQuery，YUI），你不用担心 - 页面缓存将被禁用。

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

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

哦，最后，你不需要放置;功能声明后;它是函数表达式，建议以分号结尾：）

I use this method to escape strings of HTML code on client side:

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

I am a bit concerned about memory leaks because I'm creating DOM element and not destroying it. The page is heavily Ajax'ed and will be refreshed very rarely, so there might be hundreds of calls to the method without page reload, which means those objects will be piling up, slowing down DOM traveral (e.g. with jQuery)

I tried to use document.removeChild(div), but IE gives an error "htmlfile: Invalid argument."

Any ideas?

Thanks, Andrey

解决方案

You need to call removeChild on a an element itself:

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

One thing to remember is that this solution has quirks in some of the browsers (such as handling of newlines = "\n"). In Prototype.js, we explicitly check for some of these quirks and tweak the logic appropriately.

And of course it goes without saying that you should use feature detection, not browser sniffing ;)

You also don't really need to create new element every time function is called. Simply store it in a closure. For example:

var escapeHTML = (function(){

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

  div.appendChild(text);

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

If you employ this approach and keep element permanently, you might also consider cleaning it (i.e. nulling) on page unload, to prevent possible leaks.

Unfortunately, merely registering unload event handler prevents fast navigation (aka page cache) in many browsers. Most of the JS libraries already observe that event for cleanup purposes, so if you're using one (e.g. Prototype.js, jQuery, YUI), you shouldn't worry about it - page cache will be disabled anyway.

Otherwise, you might want to reconsider your options and either always create element at runtime, or employ different solution altogether (e.g. String.prototype.replace -based one):

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

Oh, and finally, you don't need to place ";" after function declarations; it is function expressions that are recommended to be ended with semicolons :)

这篇关于从DOM中删除一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！