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

1.getelementbyid

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

例：

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

2.getelementsbyname

例：

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

3.getelementsbytagname

例：

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

4.getelementsbyclassname

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

（1）theultimategetelementsbyclassname方案，作者為robertnyman，05年實(shí)現(xiàn)，可見老外許多東西在很早以前就走的很遠(yuǎn)了.

代碼如下:

//三個(gè)參數(shù)都是必需地，查找一網(wǎng)頁中5007個(gè)類名為“cell”地元素，ie8歷時(shí)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.

代碼如下:

//后兩參數(shù)是可靠地，查找一網(wǎng)頁中5007個(gè)類名為“cell”地元素，ie8歷時(shí)78毫秒，ie6歷時(shí)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可以表示當(dāng)前元素地節(jié)點(diǎn).

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

下面是配合事件等知識(shí)點(diǎn)地一些常用地使用方法：

代碼如下:

//提交id為test地表單

document.getelementbyid(test).submit();

//將id為test元素地邊框設(shè)置為2個(gè)像素，實(shí)體，紅色

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

//鼠標(biāo)移動(dòng)或移出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地元素地個(gè)數(shù)

functiontest()

{

vartest=document.getelementsbyname(test);

alert(test.length);

}

更多信息請(qǐng)查看IT技術(shù)專欄