首頁 > web前端 > js教程 > javascript取得元素的3種方法實例詳解

javascript取得元素的3種方法實例詳解

伊谢尔伦
發布: 2017-07-18 15:58:53
原創
2230 人瀏覽過

常見的獲取元素的方法有3種,分別是透過元素ID、透過標籤名字和透過類別名字來取得。

getElementById

DOM提供了一個名為getElementById的方法,這個方法將傳回一個與之對應id屬性的節點物件。使用的時候請注意區分大小寫。

它是document物件特有的函數,只能透過其來呼叫該方法。其使用的方法如下:


document.getElementById('demo') //demo是元素对应的ID
登入後複製

此方法相容於主流瀏覽器,甚至包括IE6+,可以大膽使用。

getElementsByTagName

該方法傳回一個物件陣列(準確的說是HTMLCollection集合,它不是真正意義上的陣列),每個物件分別對應著文檔裡有著給定標籤的一個元素。類似於getElementById,同樣,該方法只提供一個參數,它的參數是指定標籤的名字,示例代碼如下:


document.getElementsByTagname('li') //li是标签的名字
登入後複製

需要注意的是,該方法除了能被document物件呼叫之外,還可以被普通的元素呼叫。範例如下:

原生DOM的話先取得標籤對象,id或name或其他

#範例:


##

<p id="targetp" >2333333</p>
<script>
  var element = document.getElementById("targetp");
  var tagname = element.tagName;
  alert(tagname);
</script>
登入後複製

jQuery取得


$("#content-header").get(0).tagName
登入後複製

如果已經取得到物件可以直接取得標記名



<p onclick="alert(&#39;您单击的是:&#39;+this.tagName);">中华人民共和国</p>
登入後複製


var demo = document.getElementById(&#39;demo&#39;);
var lis = demo.getElementsByTagname(&#39;li&#39;);
登入後複製

同樣,該方法相容於主流瀏覽器,甚至包括IE6+,可以大膽使用。

getElementsByClassName

除了透過指定標籤取得元素外,DOM還提供了getElementsByClassName方法來取得指定class名稱的元素。不過由於方法比較新,較老的瀏覽器還不支持,例如IE6。不過我們可以用hack方式來彌補老瀏覽器缺陷。此方法呼叫的方式如下所示:


document.getElementsByClassName(&#39;demo&#39;)  //demo为元素指定的class名
登入後複製

和getElementsByTagname一樣, 方法除了能被document物件呼叫之外,還可以被普通的元素呼叫。

對於比較老的瀏覽器,例如IE6、7我們可以透過下面的hack方式來實現:


function getElementsByClassName(node,classname){
    if(node.getElementsByClassName) {
      return node.getElementsByClassName(classname);
    }else {
      var results = [];
      var elems = node.getElementsByTagName("*");
      for(var i = 0; i < elems.length; i++){
        if(elems[i].className.indexOf(classname) != -1){
          results[results.length] = elems[i];
        }
      }
      return results;
    }
  }
登入後複製

如果你不只滿足上面那些元素選擇的方法,想和JQuery一樣,能透過選擇器來取得元素,實作的方法和上面的getElementsByClassName差不多,如果有興趣可以自己實作一套選擇器。不過我覺得有上面的三個方法再結合事件冒泡,已經夠用了,畢竟這三種性能上算是優秀的。

以上是javascript取得元素的3種方法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板