JavaScript部分兼容性函数

Posted 2020-10-21 freeah

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