首頁 > web前端 > js教程 > javascript基礎之查找元素的詳細介紹(存取節點)_基礎知識

javascript基礎之查找元素的詳細介紹(存取節點)_基礎知識

WBOY
發布: 2016-05-16 17:29:56
原創
1417 人瀏覽過

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

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

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

複製程式碼 代碼如下:

span1">span標籤
 <script><BR>     var oSpan = document.getElementById('span1'); //查找span元素<BR>     alert(oSpan.innerHTML); > </script>


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

複製程式碼 程式碼如下:
<script><BR>     var oDiv = document.getElementsByTagName('div'); //查找*/<BR>     alert(oDiv[0].innerHTML) //彈出第一個div中的內容<BR>     alert(oDiv.item(1).innerHTML) //彈出第二個div > </script>


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


複製代碼 程式碼如下:<script></script>
     var oDiv = document.getElementsByTagName('div');   ); {
         //do something
     }
 




複製程式碼
程式碼如下:
<script><a style="CURSOR: pointer" data="67969" class="copybut" id="copybut67969" onclick="doCopy('code67969')"> . ('city'); //找出name值為city的元素<U>     alert(oIpt[0].value);     alert(oIpt.item(1).value);   alert(oIpt.item(1).value);</script> 



getByClass()


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


複製程式碼

程式碼如下:

<script><BR>     /**按類別取得 **/<BR>     function getByClass(oParent, sClass){<BR>         var re = new RegExp('\b' sClass '\b');<BR>         var aResult = [];<BR>           if(re .test(aEle[i].className)){<BR>                 aResult.push(aEle[i]);<  }<BR>         return aResult;<BR>     }<BR> </script>


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

另外這裡之所以用正規來匹配而沒有直接用aEle[i].className == sClass,是避免標籤的class值為多個時,出現匹配失效的情況。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板