JavaScript部分相容性函數

標籤：case   pen   console   font   單元   location   body   單元素   window   

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部分相容性函數