快捷導(dǎo)航

javascript基礎(chǔ)之查找元素的詳細(xì)介紹(訪問(wèn)節(jié)點(diǎn))

更新時(shí)間：2013年07月05日 15:26:38 作者：

常用jQuery的話我們知道，jQuery有非常強(qiáng)大的選擇器來(lái)查找元素（也稱作訪問(wèn)節(jié)點(diǎn)），例如：基本選擇器、層次選擇器、過(guò)濾選擇器、屬性選擇器等

當(dāng)然這些選擇器都是jQuery擴(kuò)展的一些方法，那么使用原生js時(shí)要怎樣來(lái)查找元素呢？今天就來(lái)簡(jiǎn)單梳理下。

DOM定義了多種查找元素的方法，除了我們常用的getElementById()，還有g(shù)etElementsByTagName()和getElementsByName()。使用這幾種方法方法我們可以查找html文檔中的任意html元素。

getElementById()
首先來(lái)看下getElementById()，這個(gè)方法很簡(jiǎn)單，只需在參數(shù)中傳入html標(biāo)簽的id屬性值即可，由于html頁(yè)面中的id具有唯一性，因此該方法返回的是單個(gè)元素對(duì)象。例如：

復(fù)制代碼代碼如下:

<span id="span1">span標(biāo)簽</span>
 <script>
     var oSpan = document.getElementById('span1'); //查找span元素
     alert(oSpan.innerHTML); //彈出span標(biāo)簽中的內(nèi)容
 </script> 

getElementsByTagName()
getElementsByTagName()參數(shù)需傳入的是一個(gè)html標(biāo)簽名，它返回的是html文檔中所有與之匹配的元素列表，這個(gè)列表具有部分?jǐn)?shù)組的特性，因此也稱其為類數(shù)組。當(dāng)我們想操作某個(gè)特定的元素時(shí)，我們可以使用數(shù)組索引或item()來(lái)實(shí)現(xiàn)，例如：

復(fù)制代碼代碼如下:

<script>
     var oDiv = document.getElementsByTagName('div'); //查找所有div元素,返回一個(gè)元素列表
     /* 操作特定元素 */
     alert(oDiv[0].innerHTML) //彈出第一個(gè)div中的內(nèi)容
     alert(oDiv.item(1).innerHTML) //彈出第二個(gè)div中的內(nèi)容
 </script>

當(dāng)然我們還可以通過(guò)length屬性來(lái)循環(huán)遍歷節(jié)點(diǎn)：

復(fù)制代碼代碼如下:

<script>
     var oDiv = document.getElementsByTagName('div'); 
     for(var i = 0; i < oDiv.length; i++){
         //do something
     }
 </script>

getElementsByName()
getElementsByName()常用來(lái)查找表單元素，參數(shù)中傳入html標(biāo)簽的name屬性值，由于文檔中多個(gè)html標(biāo)簽的name值可能相同（如單選按鈕），因此該方法返回的也是一個(gè)元素列表。具體操作方法與getElementsByTagName()類似，這里不在贅述。

復(fù)制代碼代碼如下:

<script>
     var oIpt= document.getElementsByName('city'); //查找name值為city的元素 
     alert(oIpt[0].value);
     alert(oIpt.item(1).value);
 </script>

getByClass()
雖然使用上面的幾種方法已經(jīng)可以滿足常見需求，但是為了更方便的訪問(wèn)元素節(jié)點(diǎn)，我們一般會(huì)自己封裝一個(gè)通過(guò)class來(lái)查找元素的方法：

復(fù)制代碼代碼如下:

<script>
     /** getByClass **/
     function getByClass(oParent, sClass){
         var aEle = oParent.getElementsByTagName('*');
         var re = new RegExp('\\b' + sClass + '\\b');
         var aResult = [];
         for(var i = 0; i < aEle.length; i++){
             if(re.test(aEle[i].className)){
                 aResult.push(aEle[i]);
             }
         }
         return aResult;
     }
 </script>

getByClass需傳入兩個(gè)參數(shù)，其中oParent為參考節(jié)點(diǎn)，即在oParent節(jié)點(diǎn)中查找元素，sClass為要查找的元素class的值。通過(guò)循環(huán)將oParent內(nèi)的html標(biāo)簽的class值與傳入的sClass值一一對(duì)比，符合條件的會(huì)存入到數(shù)組aResult中，最后再返回這個(gè)數(shù)組。

另外這里之所以用正則來(lái)匹配而沒有直接用aEle[i].className == sClass，是避免標(biāo)簽的class值為多個(gè)時(shí)，出現(xiàn)匹配失效的情況。

您可能感興趣的文章: