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