节点操作

js中DOM操作占了极大的部分，对于节点的操作主要有节点插入，节点移除，节点复制，还有一些innerHTML，innerText，outerHTML相关的东西。

节点的插入

原生的DOM接口非常简单，参数确定，方法调用方便。jQuery对这些原生接口进行利用，组装出了一些列更为犀利的方法，append、prepend、before、after、replace等。而且因为这几个方法是用频率实在频繁，于是W3C在DOM4中决定原生支持它们。在jQuery中的原生代码如下：

append: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    });
},

prepend: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.insertBefore( elem, target.firstChild );
        }
    });
},

before: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this );
        }
    });
},

after: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
    });
},
replaceWith: function() {
    var arg = arguments[ 0 ];

    // Make the changes, replacing each context element with the new content
    this.domManip( arguments, function( elem ) {
        arg = this.parentNode;

        jQuery.cleanData( getAll( this ) );

        if ( arg ) {
            arg.replaceChild( elem, this );
        }
    });

    // Force removal if there was no new content (e.g., from empty arguments)
    return arg && (arg.length || arg.nodeType) ? this : this.remove();
},
domManip: function( args, callback ) {

    // Flatten any nested arrays
    args = concat.apply( [], args );

    var first, node, hasScripts,
        scripts, doc, fragment,
        i = 0,
        l = this.length,
        set = this,
        iNoClone = l - 1,
        value = args[0],
        isFunction = jQuery.isFunction( value );

    // We can't cloneNode fragments that contain checked, in WebKit
    if ( isFunction ||
            ( l > 1 && typeof value === "string" &&
                !support.checkClone && rchecked.test( value ) ) ) {
        return this.each(function( index ) {
            var self = set.eq( index );
            if ( isFunction ) {
                args[0] = value.call( this, index, self.html() );
            }
            self.domManip( args, callback );
        });
    }

    if ( l ) {
        fragment = jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, this );
        first = fragment.firstChild;

        if ( fragment.childNodes.length === 1 ) {
            fragment = first;
        }

        if ( first ) {
            scripts = jQuery.map( getAll( fragment, "script" ), disableScript );
            hasScripts = scripts.length;

            // Use the original fragment for the last item instead of the first because it can end up
            // being emptied incorrectly in certain situations (#8070).
            for ( ; i < l; i++ ) {
                node = fragment;

                if ( i !== iNoClone ) {
                    node = jQuery.clone( node, true, true );

                    // Keep references to cloned scripts for later restoration
                    if ( hasScripts ) {
                        jQuery.merge( scripts, getAll( node, "script" ) );
                    }
                }

                callback.call( this[i], node, i );
            }

            if ( hasScripts ) {
                doc = scripts[ scripts.length - 1 ].ownerDocument;

                // Reenable scripts
                jQuery.map( scripts, restoreScript );

                // Evaluate executable scripts on first document insertion
                for ( i = 0; i < hasScripts; i++ ) {
                    node = scripts[ i ];
                    if ( rscriptType.test( node.type || "" ) &&
                        !jQuery._data( node, "globalEval" ) && jQuery.contains( doc, node ) ) {

                        if ( node.src ) {
                            // Optional AJAX dependency, but won't run scripts if not present
                            if ( jQuery._evalUrl ) {
                                jQuery._evalUrl( node.src );
                            }
                        } else {
                            jQuery.globalEval( ( node.text || node.textContent || node.innerHTML || "" ).replace( rcleanScript, "" ) );
                        }
                    }
                }
            }

            // Fix #11809: Avoid leaking memory
            fragment = first = null;
        }
    }

    return this;
}

jQuery.each({
    appendTo: "append",
    prependTo: "prepend",
    insertBefore: "before",
    insertAfter: "after",
    replaceAll: "replaceWith"
}, function( name, original ) {
    jQuery.fn[ name ] = function( selector ) {
        var elems,
            i = 0,
            ret = [],
            insert = jQuery( selector ),
            last = insert.length - 1;

        for ( ; i <= last; i++ ) {
            elems = i === last ? this : this.clone(true);
            jQuery( insert[i] )[ original ]( elems );

            // Modern browsers can apply jQuery collections as arrays, but oldIE needs a .get()
            push.apply( ret, elems.get() );
        }

        return this.pushStack( ret );
    };
});

基本的思想基本上都是相似的，接口只是一个空心的壳而已，只是提供了一个便于记忆的名字，具体的实现还是转到内部更为复杂的函数中去了。

还有，在自己写框架的时候，对于节点的操作，特别是节点添加的形式，要注意一个要点，NodeList是实时更新的，对于插入操作，会引起NodeList立刻更新，这时就要注意不要进入死循环了。

window.onload = function(){
    var divs = document.body.getElementsByTagName('div');
    for(var i = 0; i < divs.length, i++){
        var ele = document.createElement('div');
        ele.appendChild(document.createTextNode('New Link!'));
        divs.appendChild(ele);
    }
}

还有一个点是关于节点复制方面的，这个在下面就会讲到。

节点的复制

在IE下对节点的复制，有一些奇怪的问题，其中著名的就是 IE 会自动复制在节点上添加的事件，同时IE6~IE8会复制通过node.aa = 'xx' 形式添加的属性，而标准浏览器只会复制标签内的属性和通过setAttribute设置的属性

<a id='aa' title = 'title' href = '#'>try</a>

window.onload = function(){
    var node = document.getElementById('aa');
    node.expando.key = 1;
    node.setAttribute('attr','attr');
    var clone = node.cloneNode(false);
    alert(clone.id); //aa
    alert(clone.getAttribute('title')); //'title'
    alert(clone.getAttribute('attr')); //'attr'
    node.expando.key = 2;
    alert(clone.expando.key);  //IE 2 其它 undefined
}

如果仅仅是这样，开发者还是比较容易解决以上问题的，但是IE中还会出现少复制现象，对于此，只能一步步进行处理了(from mass)：

    function fixNode(clone, src) {
        if(src.nodeType == 1) {
            //只处理元素节点
            var nodeName = clone.nodeName.toLowerCase();
            //clearAttributes方法可以清除元素的所有属性值，如style样式，或者class属性，与attachEvent绑定上去的事件
            clone.clearAttributes();
            //复制原对象的属性到克隆体中,但不包含原来的事件, ID,  NAME, uniqueNumber
            clone.mergeAttributes(src, false);
            //IE6-8无法复制其内部的元素
            if(nodeName === "object") {
                clone.outerHTML = src.outerHTML;
            } else if(nodeName === "input" && (src.type === "checkbox" || src.type == "radio")) {
                //IE6-8无法复制chechbox的值，在IE6-7中也defaultChecked属性也遗漏了
                if(src.checked) {
                    clone.defaultChecked = clone.checked = src.checked;
                }
                // 除Chrome外，所有浏览器都会给没有value的checkbox一个默认的value值”on”。
                if(clone.value !== src.value) {
                    clone.value = src.value;
                }
            } else if(nodeName === "option") {
                clone.selected = src.defaultSelected; // IE6-8 无法保持选中状态
            } else if(nodeName === "input" || nodeName === "textarea") {
                clone.defaultValue = src.defaultValue; // IE6-8 无法保持默认值
            } else if(nodeName === "script" && clone.text !== src.text) {
                clone.text = src.text; //IE6-8不能复制script的text属性
            }

        }
    }

jQuery：

    clone: function( dataAndEvents, deepDataAndEvents ) {
        dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
        deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;

        return this.map(function() {
            return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
        });
    }

这段这是一个处理参数的空壳，具体还是再jQuery.clone中：

clone: function( elem, dataAndEvents, deepDataAndEvents ) {
    var destElements, node, clone, i, srcElements,
        inPage = jQuery.contains( elem.ownerDocument, elem );

    if ( support.html5Clone || jQuery.isXMLDoc(elem) || !rnoshimcache.test( "<" + elem.nodeName + ">" ) ) {
        clone = elem.cloneNode( true );

    // IE<=8 does not properly clone detached, unknown element nodes
    } else {
        fragmentDiv.innerHTML = elem.outerHTML;
        fragmentDiv.removeChild( clone = fragmentDiv.firstChild );
    }

    if ( (!support.noCloneEvent || !support.noCloneChecked) &&
            (elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) {

        // We eschew Sizzle here for performance reasons: http://jsperf.com/getall-vs-sizzle/2
        destElements = getAll( clone );
        srcElements = getAll( elem );

        // Fix all IE cloning issues
        for ( i = 0; (node = srcElements[i]) != null; ++i ) {
            // Ensure that the destination node is not null; Fixes #9587
            if ( destElements[i] ) {
                fixCloneNodeIssues( node, destElements[i] );
            }
        }
    }

    // Copy the events from the original to the clone
    if ( dataAndEvents ) {
        if ( deepDataAndEvents ) {
            srcElements = srcElements || getAll( elem );
            destElements = destElements || getAll( clone );

            for ( i = 0; (node = srcElements[i]) != null; i++ ) {
                cloneCopyEvent( node, destElements[i] );
            }
        } else {
            cloneCopyEvent( elem, clone );
        }
    }

    // Preserve script evaluation history
    destElements = getAll( clone, "script" );
    if ( destElements.length > 0 ) {
        setGlobalEval( destElements, !inPage && getAll( elem, "script" ) );
    }

    destElements = srcElements = node = null;

    // Return the cloned set
    return clone;
}

可以看到，jQuery.clone中在不能保证cloneNode正常的情况下，用了outerHTML来操作，然后拷贝事件，属性。整体代码很臃肿，但是这也是必须的。现在能做的就是等到用户放弃IE6了。

节点的移除

节点的移除在IE6~7中就要涉及内存泄露这类的问题了。在浏览器中，移除节点主要有removeNode，removeChild，deleteContents。removeNode是IE中的方法，移除目标节点，保留子节点，参数为true时同removeChild。removeChild在IE6~7中有内存泄露问题。deleteContents则是偏门API。

首先是为啥IE6~7中会内存泄露。IE6~7中有个叫做超空间的概念。从文档中移除的节点(有Javascript关联)并不会消失掉，而是跑到了一个叫做超空间的地方。可以用parentNode来判断是否存在超空间。

window.onload = function(){
    var div = document.createElement('div');
    alert(div.parentNode); //null
    document.body.appendChild(div);
    document.body.removeChild(div);
    alert(div.parentNode); //IE6~8 object 其它 null
}

我们来看下EXT是怎么做的：

removeNode : isIE ? function(){  
       var d;  
       return function(n){  
            if(n && n.tagName != 'BODY'){  
                 d = d || DOC.createElement('div');  
                 d.appendChild(n);  
                 d.innerHTML = '';  
            }  
       }  
    }() : function(n){  
        if(n && n.parentNode && n.tagName != 'BODY'){  
             n.parentNode.removeChild(n);  
        }  
    }  

在这里，我们可以发现，它使用了innerHTML来进行移除。innerHTML在IE低版本中进行移除，会导致直接清空内部内容，只剩空壳。相比于IE对内存管理的失败，这个正是我们寻找的方法！

 

先写到这，晚上要毕业季谢师宴，估计要被灌酒灌倒死了，于是大清早爬起来把这篇博客写完了，希望晚上我还能活着回来。。。。。。