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

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

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

復制代碼 代碼如下:

<span>span標簽</span>
 <script>
     var oSpan = document.getElementById('span1'); //查找span元素
     alert(oSpan.innerHTML); //彈出span標簽中的內容
 </script>

復制代碼 代碼如下:

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

復制代碼 代碼如下:

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

復制代碼 代碼如下:

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

復制代碼 代碼如下:

<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>