前端框架学习 --结点操作

结点操作

---

一、结点的创建

1 document.createElement( )

标准：传入一个标签名，支持非标准的标签名 document.createElement("c")

IE6-7：可以传入连同用户一起生成

document.createElement("<input name='name'>")

eg:

//http://thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/
function createNamedElement(type, name) {
    var element = null;
    // Try the IE way; this fails on standards-compliant browsers
    try {
        element = document.createElement('<' + type + ' name="' + name + '">');
    } catch (e) {
    }
    if (!element || element.nodeName != type.toUpperCase()) {
        // Non-IE browser; use canonical method to create named element
        element = document.createElement(type);
        element.name = name;
    }
    return element;
}

2 innerHTML

innerHTML的创建效率比createElement快2到10倍

测试代码

var start = new Date();
for(var i = 0 ;i<1000;i++){

  document.createElement("c");

}
var end = new Date();
console.log(end-start)

var start = new Date();
var str =""
for(var i = 0 ;i<1000;i++){

  str += "<c></c>"

}

  document.innerHTML=str;

var end = new Date();
console.log(end-start)

测试结果却是快了最少2倍

innerHTML可以一次生成一大堆结点。

• 在IE6-8中使用innerHTML会对用户字符串进行trimLeft操作。
• 在IE中有些元素结点是只读的，重写innerHTML会报错。结点有 注释，style,script,link,meta,noscript
• innerHTML不会执行script中的脚本。（有defer属性时候）能执行脚本。
• 有的标签不能单独作为div的子元素，比如td,th,需要在最外面包几层，才能放到innerHTML中解释。否则浏览器会当做普通的文本结点生成。

3 insertAdjacentHTML

insertAdjacentHTML是IE私有实现的产物，兼容性比较差。有灵活的插入方式

如果不支持的insetAdjacentHTML，模拟的如下：

if (typeof HTMLElement !== "undefined" &&
        !HTMLElement.prototype.insertAdjacentElement) {
    HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
        switch (where.toLowerCase()) {
            case 'beforebegin':
                this.parentNode.insertBefore(parsedNode, this)
                break;
            case 'afterbegin':
                this.insertBefore(parsedNode, this.firstChild);
                break;
            case 'beforeend':
                this.appendChild(parsedNode);
                break;
            case 'afterend':
                if (this.nextSibling)
                    this.parentNode.insertBefore(parsedNode, this.nextSibling);
                else
                    this.parentNode.appendChild(parsedNode);
                break;
        }
    }
    HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where, parsedHTML)
    }
    HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
        var parsedText = document.createTextNode(txtStr)
        this.insertAdjacentElement(where, parsedText)
    }
}

createContextualFragment: Firefox私有属性

是Range对象的一个实力方法。相当于insertAdjacentHTML直接将内容插入到ＤＯＭ树,createContextFragment允许将字符串转换为文档碎片。

---

通过两个构造器与一个原型实现无new实例化，这样的话链式操作不会被new关键字打断

function $(a, b) { //第一个构造器
    return new $.fn.init(a, b); //第二个构造器
}
//将原型对象放到一个名字更短、更好记的属性中
//这是jQuery人性化的体现，也方便扩展原型方法
$.fn = $.prototype = {
    init: function(a, b) {
        this.a = a;
        this.b = b;
    }
}
//共用同一个原型
$.fn.init.prototype = $.fn;

var a = $(1, 2);
console.log(a instanceof $); //true
console.log(a instanceof $.fn.init); //true

---

传入一大推的字符成长一堆结点的功能由parseHTML方法实现。

////TODO

实现html需要注意的事情

如何实现

对应浏览器处理问题