节点列表和HTML集合 getElementByName() getElementByTagName() 都返回NodeList对象，

document.images和document.forms属于HTMLCollection对象（只读的类数组对象）

    var content=Array.prototype.map.call(document.getElemetnsByTagName("p"),function(e){return e.innerHTML;});

    var snapshot=Array.prototype.slice.call(nodelist,0);

• #nav the element of id="nav"
• div all div element
• .warning all class of element include "warning"
• p[lang="fr"] all p element of used lang is "fr"
• *[name="x"] all element which name equals "x"
• span.fatal.error the class of span element include "fatal" and "error"
• span[lang="fr"].warning the class of span element include "warning" and lang is "fr"
• #log span orignal element id is "log", and the direct and indirect children element is span
• #log>span orignal element id is "log", and the direct children element is span
• body>h1:first-child body element' child element , the first element is h1

• div, #log all div element, and all elements of id="log"

• node

• parentnode
• childnodes
• firstChild, lastChild
• nextSibling, previousSibling
• nodeType
• nodeValue
• NodeName

/*
返回元素e的第n层祖先元素，
如果不存在，则返回null，
如果n=0, 返回e本身，
如果n=1，则返回其父元素，
如果n=2，则返回其祖父元素，etc
*/
function parent(e,n){
    if(n==undefined) n=1;
    while(n-- & e) e=e.parentNode;
    if(!e || e.nodeType!==1) return null;

    return e;
}

/*
返回元素e的第n个兄弟元素
如果n为正，返回后续的第n个兄弟元素
如果n为负，返回前面的第n个兄弟元素
如果n=0，返回e本身
*/
function sibling(e,n){
    while(e &&n!==0){
    if(n>0){ // n为正，查找后续的第n个兄弟元素
        if(e.nextElementSibling) e=e.nextElementSibling;
        else{
            for(e=e.nextSibling;e&& e.nodeType!=1;e=e.nextSibling)/* blank loop*/;
        }
        n--;
    }else{// n为负，查找前面的第n个兄弟元素
        if(e.previousElementSibling)e=e.previousElementSibling;
        else{            {
            for(e=e.nextSibling;e&& e.nodeType!=1;e=e.nextSibling)/* blank loop*/;
        }
        n++;
    }
    }
    return e;
}

/*
返回元素e的第n代子元素，如果不存在则为null，
负值n代表从后往前数。0表示第一个元素，-1表示最后一个，-2代表倒数第二个
*/
function child(e,n){
    if(e.children){
        if(n<0) n+=e.children.length;
        if(n<0) return null;
        return e.children[n];
    }

    if(n>=0){
        if(e.firstElementChild)e=e.firstElementChild;
        else{
            for(e=e.firstChild;e&&e.nodeType!==1;e=e.nextSibling)/* blank loop*/;
        }
        return sibling(e,n);
    }
    else{
        if(e.lastElementChild) e=e.lastElementChild;
        else{
            for(e=e.lastChild;e&&e.nodeType!==1;e=e.previousSibling)/* blank loop*/;    
        }
        return sibling(e,n+1);
    }
}

function reverse(n){
    var f=document.createDocumentFragment();
    while(n.lastChild) f.appendChild(n.lastChild);

    n.appendChild(f);
}

/* Insert.before, insert.after, insert.atStart,insert.atEnd */
var insert=(function(){
//if element have orignal insertAdjacentHTML
    if(document.createElement("div").insertAdjacentHTML){
        return{
            before:function(e,h){e.insertAdjacentHTML("beforebegin",h);},
            after:function{e,h}{e.insertAdjacentHTML("afterend",h);},
            atStart:function(e,h){e.insertAdjacentHTML("afterbegin",h);},
            atEnd:function{e,h}{e.insertAdjacentHTML("beforeend",h);}
        };
    }

//not have insertAdjacentHTML,
//First we need define a tool function to return documentFragment, it include parsed html.
    function fragment(html){
        var elt=document.createElement("div");
        var frag=document.createDocumentFragment();
        elt.innerHTML=html;
        while(elt.firstChild) frag.appendChild(elt.firstChild);

        return frag;
    }

    var Insert={
        before:function(elt,html){
            elt.parentNode.insertBefore(fragment(html),elt);
        },
        after:function(elt,html){
            elt.parentNode.insertBefore(fragment(html),elt.nextSibling);
        },
        atStart:function(elt,html){
            elt.parentNode.insertBefore(fragment(html),elt.firstChild);
        },
        atEnd:function(elt,html){
            elt.appendChild(fragment(html));
        }
    };

//base above function to implement insertAdjacentHTML
    Element.prototype.insertAdjacentHTML=function(pos,html){
        switch(pos.loLowerCase()){
            case "beforebegin":return Insert.before(this,html);
            case "afterend":return Insert.after(this,html);
            case "afterbegin":return Insert.atStart(this,html);
            case "beforeend":return Insert.atEnd(this,html);
        }
    };
    return Insert;

}());