zoukankan      html  css  js  c++  java
  • 节点操作

    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;
    }
    View Code
    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 );
        };
    });
    View Code

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

    还有,在自己写框架的时候,对于节点的操作,特别是节点添加的形式,要注意一个要点,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;
    }
    View Code

    可以看到,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对内存管理的失败,这个正是我们寻找的方法!

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

  • 相关阅读:
    python第三十一课--递归(1.简单递归函数的定义和使用)
    python第三十课--异常(with as操作)
    python第三十课--异常(异常对象传递过程)
    python第三十课--异常(raise关键字)
    python第三十课--异常(else讲解)
    python第三十课--异常(finally讲解)
    python第三十课--异常(异常处理定义格式和常见类型)
    python第二十九课——文件读写(复制文件)
    python第二十九课——文件读写(写数据的操作)
    16 nginx实现负载均衡
  • 原文地址:https://www.cnblogs.com/cyITtech/p/3790066.html
Copyright © 2011-2022 走看看