javascript基礎之尋找元素的詳細介紹(訪問節點)

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

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

getElementById()
首先來看下getElementById()，這個方法很簡單，只需在參數中傳入html標籤的id屬性值即可，由於html頁面中的id具有唯一性，因此該方法返回的是單個元素對象。例如：複製代碼 代碼如下:<span id="span1">span標籤</span>
 <script>
     var oSpan = document.getElementById('span1'); //尋找span元素
     alert(oSpan.innerHTML); //彈出span標籤中的內容
 </script>

getElementsByTagName()
getElementsByTagName()參數需傳入的是一個html標籤名，它返回的是html文檔中所有與之匹配的元素列表，這個列表具有部分數組的特性，因此也稱其為類數組。當我們想操作某個特定的元素時，我們可以使用數組索引或item()來實現，例如：複製代碼 代碼如下:<script>
     var oDiv = document.getElementsByTagName('div'); //尋找所有div元素,返回一個元素列表
     /* 操作特定元素 */
     alert(oDiv[0].innerHTML) //彈出第一個div中的內容
     alert(oDiv.item(1).innerHTML) //彈出第二個div中的內容
 </script>

當然我們還可以通過length屬性來迴圈遍曆節點：複製代碼 代碼如下:<script>
     var oDiv = document.getElementsByTagName('div');
     for(var i = 0; i < oDiv.length; i++){
         //do something
     }
 </script>

getElementsByName()
getElementsByName()常用來尋找表單元素，參數中傳入html標籤的name屬性值，由於文檔中多個html標籤的name值可能相同（如選項按鈕），因此該方法返回的也是一個元素列表。具體操作方法與getElementsByTagName()類似，這裡不在贅述。複製代碼 代碼如下:<script>
     var oIpt= document.getElementsByName('city'); //尋找name值為city的元素
     alert(oIpt[0].value);
     alert(oIpt.item(1).value);
 </script>

getByClass()
雖然使用上面的幾種方法已經可以滿足常見需求，但是為了更方便的訪問元素節點，我們一般會自己封裝一個通過class來尋找元素的方法：複製代碼 代碼如下:<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需傳入兩個參數，其中oParent為參考節點，即在oParent節點中尋找元素，sClass為要尋找的元素class的值。通過迴圈將oParent內的html標籤的class值與傳入的sClass值一一對比，合格會存入到數組aResult中，最後再返回這個數組。

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