日期:2014-05-16  浏览次数:20303 次

精通JavaScript源码1

去空格方法,FF把空白的处当作文本节点,nodeValue等于3,IE会忽略。

下面这个方法,如果出入的对象子节点很多的时候,效率不高。

function cleanWhitespace( element ) {
    // 如果没有提供参数,遍历整个HTML文档
    element = element || document;
    // 使用第一个child作为遍历的开始
    var cur = element.firstChild;
    // 知道不存在节点为止
    while ( cur != null ) 
        //如果这个节点是文本节点,只包含空格
        if ( cur.nodeType == 3 && ! /\S/.test(cur.nodeValue) ) {
            // 删除文本节点
            element.removeChild( cur );
           // 如果是元素节点
        } else if ( cur.nodeType == 1 ) {
             // 递归这个节点
             cleanWhitespace( cur );
        }
        cur = cur.nextSibling; // 移到下一个节点
    }
}

? 由于上面这个方法,存在效率低下问题,所以下面可以重写获取元素节点 的各个方法。

? 获取elem的上一个元素节点:

function prev( elem ) {
    do {
        elem = elem.previousSibling;
    } while ( elem && elem.nodeType != 1 );
    return elem;
}

? 获取elem的下一个元素节点:

function next( elem ) {
    do {
        elem = elem.nextSibling;
    } while ( elem && elem.nodeType != 1 );
    return elem;
}

?获取第一个子元素节点:如果不存在获取下一个元素节点

function first( elem ) {
    elem = elem.firstChild;
    return elem && elem.nodeType != 1 ?
        next( elem ) : elem;
}

? 获取最后一个子元素节点:如果不存在获取上一个元素节点

function last( elem ) {
    elem = elem.lastChild;
    return elem && elem.nodeType != 1 ?
        prev( elem ) : elem;
}

?获取父节点:(根据参数num,可以获取父节点的父节点)

function parent( elem, num ) {
    num = num || 1;
    for ( var i = 0; i < num; i++ )
        if ( elem != null ) elem = elem.parentNode;
    return elem;
}

?HTMLElement在IE中隐藏不可以用,FF中可以。

如下设置,表示Html中的元素(标签)都可以用next方法:

HTMLElement.prototype.next = function() {
    var elem = this;
    do {
        elem = elem.nextSibling;
    } while ( elem && elem.nodeType != 1 );
    return elem;
};

? 重写getElementById方法:

function id(name) {
    return document.getElementById(name);
}

? 重写getElementByTagName方法:

function tag(elem,name) {
    // 如果没有提供elem,就是整个文档
    return (elem || document).getElementsByTagName(name);
}

?重写createElement方法:

function create( elem ) {
    return document.createElementNS ?
        document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :
        document.createElement( elem );
}

? 重写insertBefore方法:

function before( parent, before, elem ) {
    // Check to see if no parent node was provided
    if ( elem == null ) {
        elem = before;
        before = parent;
        parent  = before.parentNode;
    }
    parent.insertBefore( checkElem( elem ), before );
}
?
function checkElem( elem ) {
    // If only a string was provided, convert it into a Text Node
    return elem && elem.constructor == String ?
        document.createTextNode( elem ) : elem;
}

?重写append方法:

function append( parent, elem ) {
    parent.appendChild( checkElem( elem ) );
}

?重写removeChild方法:

function remove( elem ) {
    if ( elem ) elem.parentNode.removeChild( elem );
}

?删除全部子元素:

// Remove all of an Element’s children from the DOM
function empty( elem ) {
    while ( elem.firstChild )
        remove( elem.firstChild );
}