1.getElementsByClassName()

function getElementsByClassName(node,classname){
    if(node.getElementsByClassName){
        //使用現有方法
        return node.getElementsByClassName(classname);
    }else{
        var results=new Array();
        var elems=node.getElementsByTagName("*");
        for(var i=0;i<elems.length;i++){
            
 
if(elems[i].className.indexOf(classname)!=-1){
                results[results.length]=elems[i];
            }
        }
        return results;
    }
}
var list1=document.getElementById("linklist");
var test=getElementsByClassName(list1,"test");
console.log(test);

2.共享onload事件

假設我有兩個函數，firatFunction，secondFunction，如果想讓他們在加載時得到執行，如果把他們註意綁定到onload事件上，他們當中將只有最後那個才會被實際執行：

window.onload=firstFunction;
window.onload=secondFunction;

secondFunction將取代firstFunction，你可能會想，每個事件處理函數只能綁定一條指令。有一種方法可以讓我避過這個難題：可以先創建一個匿名函數來容納這兩個函數，然後把那個匿名函數綁定到onload事件上，如下所示：

window.onload=function(){
    firstFunction();
    secondFunction();
}

它確實能很好的工作--在需要綁定的函數不是很多的場合，這應該是最簡單的解決方法，

這裏還有一個最佳的解決方法--不管你打算在頁面加載完畢時執行多少個函數，它都可以應付自如。

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!=‘function‘){
        window.onload=func;
    }else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}
addLoadEvent(firstFunction);

addLoadEvent(secondFunction);

3.在現有元素後插入一個新元素

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

這裏註意insertBefore的使用，在目標元素前面插入新元素

parentElement.insertBrfore(newElement,targetElement);

4.尋找下一個元素節點

function getNextElement(node){
    if(node.nodeType==1){  //1代表元素節點
        return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);
    }
    return null;
}
var header=document.getElementById("header");
var elem=getNextElement(header.nextSibling);

5.追加類名

function addClass(element,value){
    if(!element.className){
        element.classNmae=value;
    }else{
        newClassName=element.className;
        newClassName+=" ";
        newClassName+=value;
        element.className=newClassName;
    }
}

6.當前頁面導航突出顯示，並給body添加不同的id

function highlightPage(){
    var headers=document.getElementsByTagName("header");
    if(headers.length==0) return false;
    var navs=headers[0].getElementsByTagName("nav");
    if(navs.length==0) return false;
    var links=navs[0].getElementsByTagName("a");
    var linkUrl;
    for(var i=0;i<links.length;i++){
        linkUrl=links[i].getAttribute("href");
        if(window.location.href.indexOf(linkUrl)!=-1){ //獲取當前頁面鏈接
            links[i].className="here";
　　　　　　  var linkText=links[i].lastChild.nodeValue.toLowerCase();
　　　　　　　document.body.setAttribute("id",linkText);
        }
    }
}

7.點擊label，表單字段獲得焦點

作為增進可訪問性的元素，label非常有用，它通過for屬性把一小段文本關聯到表單的一個字段，對於屏幕閱讀器來說，標簽中的這一小段文本幾乎是不可或缺的。很多瀏覽器都會為label添加默認行為：如果label中的文本被單擊，關聯的表單字段就會獲得焦點。這對於增進表單的可用性是很有幫助的，然而並不是所有瀏覽器都實現了該行為。

function focusLabels(){
    var labels=document.getElementsByTagName("label");
    for(var i=0;i<labels.length;i++){
        labels[i].onclick=function(){
            var id=this.getAttribute("for");
            var element=document.getElementById(id);
            element.focus();
        }
    }
}

8.占位符值

function resetFields(whichform){
    //form.elements.length  返回表單包含的表單元素個數
    for(var i=0;i<whichform.elements.length;i++){
        var element=whichform.elements[i];
        if(element.type=="submit") continue;
        var check=element.placeholder || element.getAttribute("placeholder");
        if(!check) continue;
        element.onfocus=function(){
            var txt=this.placeholder || this.getAttribute("placeholder");
            if(this.value==txt){
                this.className="";
                this.value="";
            }
        }
        element.onblur=function(){
            if(this.value==""){
                this.className="placeholder";
                this.value=this.placeholder || this.getAttribute("placeholder");
            }
        }
        element.onblur();
    }
}


addLoadEvent(prepareForms)
function prepareForms(){
    for(var i=0;i<document.forms.length;i++){
        var thisform=document.forms[i];
        resetFields(thisform);
    }
}

JavaScript部分兼容性函數