精通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 );
}