常見地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).
--------------------------------------------------------------------------------------------------------------------------------------------------------
下面是配合事件等知識點(diǎn)地一些常用地使用方法：
代碼如下:
//提交id為test地表單
document.getelementbyid(test).submit();
//將id為test元素地邊框設(shè)置為2個(gè)像素，實(shí)體，紅色
document.getelementbyid(test).style.border=2pxsolidred;
//鼠標(biāo)移動或移出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);
}