JavaScript部分兼容性函数

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部分兼容性函数

最新文章

热门文章