《javascript中innerhtml的是与非》由会员分享,可在线阅读,更多相关《javascript中innerhtml的是与非(4页珍藏版)》请在金锄头文库上搜索。
1、分享:innerHTML的是与非在前端开发中,为了更好的操纵数据与页面展示,于是有了把技术分离出来,再根据数据和模板去渲染页面的做法。最终js生成的html(html字符串、DOM元素或DOM片段)都要追加到DOM树上或者从DOM树上移除一些元素,而这些是靠innerHTML、appendChild、removeChild等实现。innerHTML关于innerHTML的具体用法就不啰嗦了,如有兴趣可以参考MDN的介绍。相比createElement和appendChild的方式,使用innerHTML的好处也很简单,就是它用起来足够简单。兼容性在长期使用innerHTML的过程中发现了很多兼
2、容性问题。比如IE8以下,运行以下代码:var el = document.getElementsByTagName(p)0;el.innerHTML = test; / 正常el.innerHTML = test; / 未知的运行时错误可以发现,一个p元素的innerHTML只能包含文本和内联元素。再看一个例子,同样在IE8以下: ccc document.getElementById(abc).innerHTML = abc; / 未知的运行时错误 出错原因就是IE8针对包括table在内的部分元素,其innerHTML是只读的,不能被设置。测试发现,这些元素包括:col,colGroup
3、,frameSet,html,head,style,table,tBody,tFoot,tHead,title和tr等。类似的问题还有,select元素在IE8以下的浏览器设置innerHTML无效:var el = document.getElementsByTagName(select)0, inner = 20112012; el.innerHTML = inner; / 无报错,但无效解决方案有多种:var el = document.getElementsByTagName(select)0;/ 方案一 el.add(new Option(text, value);/ 方案二var
4、op = document.createElement(option);op.innerText = text;op.value = value;el.appendChild(op);最诡异的一次是,在IE8以下:var el = document.getElementsByTagName(div)0;el.innerHTML = some text; / 未知的运行时错误 el.innerHTML = some textsome str; / 未知的运行时错误 el.innerHTML = some strsome text; / 正常关于表达式html字符串中,p标签包含pre标签,并且和
5、p的开始标签和pre的开始标签之间没有任何字符串,都会报“未知的运行时错误”。IE8以下的浏览器在处理html结构上比较严格,为此给我们使用innerHTML的时候带来了很多不便。对于一些不适合使用innerHTML的元素,解决方案上,就必须用创建DOM元素(如createElement)和添加DOM元素的方法来设置DOM树的内容。像这样的兼容性还有待发现,总的感觉,特别是IE8以下的浏览器,在使用innerHTML的时候,要特别考虑兼容性测试。内存泄漏导致IE的内存泄漏原因,常听到的有“闭包导致内存泄漏”或者“没有解除事件导致内存泄漏”,还有常见的“循环引用”等。innerHTML的方式设置
6、DOM元素的内容,以移除DOM元素下的子元素。也会产生“没有解除事件导致内存泄漏”和“循环引用”的问题。如:var el = document.createElment(div);el.onclick = function () /循环引用el el.style.color = #000;document.body.appendChild(el);/重置el所在的容器的内容,移除eldocument.body.innerHTML = ;如果循环执行以上代码,就会发现因为el的循环引用,el所占用的内存没有被释放。还有另外一种情况也会导致内存泄露。var el = document.create
7、Element(div);el.innerHTML = Test Link;document.body.appendChild(el);循环运行以上的代码,会发现内存节节上升。如果把a标签的onclick去掉,内存使用就稳定。可见以上代码也会造成内存泄漏。这种现象产生的条件是:1、内存中有一个孤立的元素(el),未添加到DOM树中;2、该元素的innerHTML中有标签是绑定事件的;3、该元素最后被添加到DOM树中。安全性如前面所说的innerHTML可以插入正确的html语法的html字符串,当然也包括script标签。只需要在script标签上加上defer属性,并且以一段非包含其他标签的html代码插入到DOM中,script中的js就会被执行。var tagHtml = some text, scriptHtml=alert(Hello);document.body.innerHTML = tagHtml + scriptHtml; / Hello由于可以通过以上方式插入并执行脚本,对于把非信任来源的html字符串用innerHTML插入,存在安全性问题,容易受到脚本攻击。小结以上悉数了innerHTML的各种是非。总的来说,用innerHTML来追加移除DOM元素还是很方便的,但在使用innerHTML方法的时候,要多些注意一下兼容性、性能影响和安全性。