javascript基礎之查找元素的詳細介紹

　　當然這些選擇器都是jQuery擴展的一些方法那麼使用原生js時要怎樣來查找元素呢？今天就來簡單梳理下

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

getElementById()
首先來看下getElementById()這個方法很簡單只需在參數中傳入html標簽的id屬性值即可由於html頁面中的id具有唯一性因此該方法返回的是單個元素對象例如

復制代碼 代碼如下:
<span id="span">span標簽</span>
 <script>
     var oSpan = documentgetElementById(span); //查找span元素
     alert(oSpaninnerHTML); //彈出span標簽中的內容
 </script>

　　
getElementsByTagName()
getElementsByTagName()參數需傳入的是一個html標簽名它返回的是html文檔中所有與之匹配的元素列表這個列表具有部分數組的特性因此也稱其為類數組當我們想操作某個特定的元素時我們可以使用數組索引或item()來實現例如

復制代碼 代碼如下:
<script>
     var oDiv = documentgetElementsByTagName(div); //查找所有div元素返回一個元素列表
     /* 操作特定元素 */
     alert(oDiv[]innerHTML) //彈出第一個div中的內容
     alert(oDivitem()innerHTML) //彈出第二個div中的內容
 </script>

　　
當然我們還可以通過length屬性來循環遍歷節點

復制代碼 代碼如下:
<script>
     var oDiv = documentgetElementsByTagName(div);
     for(var i = ; i < oDivlength; i++){
         //do something
     }
 </script>

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

復制代碼 代碼如下:
<script>
     var oIpt= documentgetElementsByName(city); //查找name值為city的元素
     alert(oIpt[]value);
     alert(oIptitem()value);
 </script>

　　
getByClass()
雖然使用上面的幾種方法已經可以滿足常見需求但是為了更方便的訪問元素節點我們一般會自己封裝一個通過class來查找元素的方法

復制代碼 代碼如下:
<script>
     /** getByClass **/
     function getByClass(oParent sClass){
         var aEle = oParentgetElementsByTagName(*);
         var re = new RegExp(b + sClass + b);
         var aResult = [];
         for(var i = ; i < aElelength; i++){
             if(retest(aEle[i]className)){
                 aResultpush(aEle[i]);
             }
         }
         return aResult;
     }
 </script>

　　
getByClass 需傳入兩個參數其中oParent為參考節點即在oParent節點中查找元素sClass為要查找的元素class的值通過循環將 oParent內的html標簽的class值與傳入的sClass值一一對比符合條件的會存入到數組aResult中最後再返回這個數組

另外這裡之所以用正則來匹配而沒有直接用aEle[i]className == sClass是避免標簽的class值為多個時出現匹配失效的情況

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20332.html