js底层接口函数

1、以前做外包单子的时候都是链个jQuery然后使用封装好的接口，很方便，但有时候动不动就用几十K的jQuery写一个普通得不能再普通的效果，大材小用不说，严重影响了页面的加载速度。然而用习惯了之后一撇开它用最原始的JS来实现，就难免会有兼容性问题，目前已经回家10来天，JS练着也感觉有一些水准了，写了些底层接口，分享出来： 1、通过类名获取元素：function getElementsByClassName(className,root) var list=new Array(); var temClass; if(!root)root=document.

2、body; var array=root.getElementsByTagName_r("*"); for(var i=0;i<array.length;i+)     if(document.all) temClass=arrayi.getAttribute("className");  else temClass=arrayi.getAttribute("class");  if(temClass=null) 

3、60; continue;  var temList=temClass.split(" ");  for(var j=0;j<temList.length;j+)   if(temListj=className)    list.push(arrayi);       return list; 以root为根节点获取页面中类名为“className”的元素集合，如果roo

4、t为undefined，则未传入root参数，将取 document.body为默认根节点来获取页面中类名为“className”的元素集合并返回。获取所有标签并判断类名属性是否与 className相符。 2、添加类名：function addClass(object,className)    var classString;    if(document.all) classString=object.getAttribute("className"); else classString=

5、object.getAttribute("class"); if(classString=null)  if(document.all) object.setAttribute("className",className);  else object.setAttribute("class",className);  else  classString+=" "+className;  if(documen

6、t.all) object.setAttribute("className",classString);  else object.setAttribute("class",classString);  为object添加className类，如果object已经定义了类则后续再添加，如为<div class="main">添加"box"类，添加后结果为<div class="main box">，而不是<div class=

7、"box">。 3、删除类名：function removeClass(object,className) var classString;    if(document.all) classString=object.getAttribute("className"); else classString=object.getAttribute("class"); if(classString=null) return false; var clas

8、sArray=classString.split(" "); for(var i=0;i<classArray.length;i+)  if(classArrayi!=className) continue;  else   classArray.splice(i,1);    classString=classArray.join(" "); if(document.all)object.setAttribute(&q

9、uot;className",classString); else object.setAttribute("class",classString); 为object删去className类，如为<div class="main box">删去"box"类，添加后结果为<div class="main">，而不是<div class="">。先以字符串的形式获取object的现有类名，再以split空格分割为数组，逐个与class

10、Name比较，匹配了就删了它然后join成字符串赋给object。 4、获取下一个节点：function getNextNode(object)    if(document.all)  if(object.nextSibling) return object.nextSibling;  else     var nodeText=object.nextSibling.nodeValue.replace(/s/g,"");  if(ob

11、ject.nextSibling.nodeType=3&&nodeText="")   if(object.nextSibling.nextSibling) return object.nextSibling.nextSibling;    else if(object.nextSibling.nodeType=3&&nodeText.length>0) return object.nextSibling;  JS原生有提供一个nextSiblin

12、g属性，不过需要对其进行FF兼容处理，所以如果IE的话，如果元素存在，就直接用nextSibling返回元 素；FF的话用替换掉多余的换行符后进行判断如果下一个节点是文本节点并且为空，则返回object的下下个元素，如果不为空就返回下一个元素。这个我解 释下为什么要这样处理，因为我看到一些例子直接就返回下下个元素，为的是避开FF元素之间的换行文本，但是如果object的下一个是文本元素呢，这种情况如果直接返回下下个元素，就错了，因为用户可能需要的是文本元素。如： <div class="main"><div class="box&quo

13、t;></div>龙<span></span></div> IE下：main里面有3个子节点，2个元素1个文本FF下：main里面有5个子节点，2个元素3个文本（两个换行跟文本合并在一起成为一个文本），大致如下： #text<div class="box"></div>#text龙#text<span></span>#text #text为换行符，所以替换掉元素上面的换行符后，如果文本元素不为空，如“#text龙#text”，替换后为“龙”，则

14、可知当前存在文本节点，应当返回该节点。 5、获取子节点：function getChildNodes(object)    if(document.all) return object.childNodes; else     var childArray=object.childNodes;  var temArray=new Array();  for(var i=0;i<childArray.length;i+)   if(

15、childArrayi.nodeType=3&&childArrayi.nodeValue.replace(/s/g,"")="") continue;   temArray.push(childArrayi);    return temArray;  传入根元素，获取其子节点，兼容处理跟getNextNode一致，不解释。 6、获取元素：function repeatCheck(checkList)   

16、for(var i=0;i<checkList.length;i+)  for(var j=i+1;j<checkList.length;j+)           if(checkListi=checkListj) checkList.splice(j,1); return checkList;function getElement(string,rootArray)    if(!rootArray) 

17、0;rootArray=new Array();  rootArray0=document.body;  var temArray=string.split(" "); if(temArray.length=1)     var returnList=new Array();  string=temArray0;     while(rootArray.length)   if(string.ma

18、tch(/#1/)    var temId=string.replace(/#1/,"");    returnList.push(document.getElementByIdx_x(temId);      else if(string.match(/.1/)    var temClass=string.replace(/.1/,"");  

19、0; var classList=getElementsByClassName(temClass,rootArray0);    for(var i=0;i<classList.length;i+)     returnList.push(classListi);          else    var obj=rootArray0.getEleme

20、ntsByTagName_r(string);    if(obj) for(var i=0;i<obj.length;i+) returnList.push(obji);      rootArray.shift();      return repeatCheck(returnList);  else     var childArray=new Array();&#

21、160; for(var i=0;i<rootArray.length;i+)    var arr=new Array(rootArrayi);    childArray=childArray.concat(getElement(temArray0,arr);     if(temArray.length>1)   temArray.shift();   string=temArray.join(" ");   return getElement(string,childArray);    感谢你看完整篇文章，作为报答献上本文章的压轴函数，个人目前最精华的了哈，可以这样getElement(".main .box a")获取到main里面类属性为.box子元素中