节点的创建
浏览器提供了多种手段创建API,从流行程度依次是document.createElement、innerHTML、insertAdjacentHTML、createContextualFragment。
document.createElement:传入一个标签名,返回此类型的元素节点。对于浏览器不支持的节点类型,也可以支持,后来被用于IE6-IE8支持H5新标签。
console.log(document.createElement('abc')); //<abc></abc>
innerHTML:创建效率至少比createElement快2-10倍,并且可以一次性大量生成节点,但是对于空白的处理有兼容问题;另外innerHTML不会执行script里面的脚本,jQuery直接用正则把内容抽出来使用全局eval执行了。最后一个问题是有些标签不能直接作为div的子标签,例如tr、td、th,框架用特殊标签包裹这些,结果后来发现浏览器会自动补全这些标签...
insertAdjacentHTML:可以灵活的将节点插入任意位置,但是同样有标签包裹问题。
节点的插入
appendChild:参数类型确定,无重载。
节点的复制
cloneNode:IE会复制绑定的事件,由于引用不是来自框架,也无法解除,一般框架重写API,接受一个布尔参数决定是否复制事件。
节点的删除
removeNode:IE私有实现,将目标从文档树中删除,返回目标节点。接受一个参数,false时仅删除目标节点,保留子节点。
removeChild:在老IE有内存泄露问题,因为在IE6-IE8中存在一个叫DOM超空间的概念,当元素移出DOM树,又有JS关联时,此元素不会消失,会被保存到一个叫超空间的地方。
// EXT框架中针对IE6/IE7的重写
var removeNode = IE6 || IE7 ? function() {
var d;
return function(node) {
if (node && node.tagName != 'BODY') {
d = d || document.createElement('div');
d.appendChild(node);
d.innerHTML = '';
}
}
}() : function(node) {
//removeChild
}