常見地getelementbyid，getelementsbyname，getelementsbytagname.但外國人不滿意這些api，于是搞出了getelementsbyclassname,后來一點點又出現了jquery選擇器，這里只說原始js選擇.

1.getelementbyid

這是最常用地選擇器，通過id來定位：

例：

vartest=document.getelementbyid(test).value;//獲取文檔中id為test地元素地值，并賦值給test變臉

2.getelementsbyname

例：

vartest=document.getelementbyname(test);//獲取文檔中name為test地元素地節(jié)點，并賦值給test變量，此時test變量是一個數組

3.getelementsbytagname

例：

vartest=document.getelementsbytagname(test);//獲取文檔中class為test地元素地節(jié)點，并賦值給test，此時test變量是一個數組，這個選擇器在ie5，6，7，8中無法使用

4.getelementsbyclassname

這個選擇器在js地api中是找不到地，想要使用必須自己定義方法，通常地原理為先使用getelementsbytagname(*)取出文檔中所有元素，然后進行遍歷，使用正則表達式找出匹配地元素放入一個數組返回.網上有很多程序員實現了這個選擇器，下面舉兩例：

（1）theultimategetelementsbyclassname方案，作者為robertnyman，05年實現，可見老外許多東西在很早以前就走的很遠了.

代碼如下:

//三個參數都是必需地，查找一網頁中5007個類名為“cell”地元素，ie8歷時1828~1844毫秒，

//ie6為4610~6109毫秒，ff3.5為46~48毫秒，opera10為31~32毫秒，chrome為23~26毫秒，

//safari4為19~20毫秒

functiongetelementsbyclassname(oelm,strtagname,strclassname){

vararrelements=(strtagname==*&&oelm.all)？oelm.all:

oelm.getelementsbytagname(strtagname);

vararrreturnelements=newarray();

strclassname=strclassname.replace(/\-/g,\\-);

varoregexp=newregexp((^|\\s)+strclassname+(\\s|$));

varoelement;

for(vari=0;i<arrelements.length;i++){

oelement=arrelements[i];

if(oregexp.test(oelement.classname)){

arrreturnelements.push(oelement);

}

}

return(arrreturnelements)

}

（2）由dustindiaz（《javascriptdesignpatterns》地作者）提供，但兼容性不如上面地，不支持ie5.

代碼如下:

//后兩參數是可靠地，查找一網頁中5007個類名為“cell”地元素，ie8歷時78毫秒，ie6歷時125~171毫秒

//ff3.5為42~48毫秒，opera10為31毫秒，chrome為22~25毫秒，safari4為18~19毫秒

vargetelementsbyclass=function(searchclass,node,tag){

varclasselements=newarray();

if(node==null)

node=document;

if(tag==null)

tag='*';

varels=node.getelementsbytagname(tag);

varelslen=els.length;

varpattern=newregexp((^|\\s)+searchclass+(\\s|$));

for(i=0,j=0;i<elslen;i++){

if(pattern.test(els[i].classname)){

classelements[j]=els[i];

j++;

}

}

returnclasselements;

}

--------------------------------------------------------------------------------------------------------------------------------------------------------

注：this可以表示當前元素地節(jié)點.

--------------------------------------------------------------------------------------------------------------------------------------------------------

下面是配合事件等知識點地一些常用地使用方法：

代碼如下:

//提交id為test地表單

document.getelementbyid(test).submit();

//將id為test元素地邊框設置為2個像素，實體，紅色

document.getelementbyid(test).style.border=2pxsolidred;

//鼠標移動或移出id為test地元素，改變其背景色

functiontest(){

document.getelementbyid(test).onmouseover=function(){document.getelementbyid(test2).style.backgroundcolor=red};

document.getelementbyid(test).onmouseout=function(){document.getelementbyid(test2).style.backgroundcolor=blue};

}

//彈出文檔中name為test地元素地個數

functiontest()

{

vartest=document.getelementsbyname(test);

alert(test.length);

}

更多信息請查看IT技術專欄