常見(jiàn)的獲取元素的方法有3種，分別是通過(guò)元素ID、通過(guò)標(biāo)簽名字和通過(guò)類(lèi)名字來(lái)獲取。

getElementById

DOM提供了一個(gè)名為getElementById的方法，這個(gè)方法將返回一個(gè)與之對(duì)應(yīng)id屬性的節(jié)點(diǎn)對(duì)象。使用的時(shí)候請(qǐng)注意區(qū)分大小寫(xiě)。

它是document對(duì)象特有的函數(shù)，只能通過(guò)其來(lái)調(diào)用該方法。其使用的方法如下：

document.getElementById('demo') //demo是元素對(duì)應(yīng)的ID

該方法兼容主流瀏覽器，甚至包括IE6+，可以大膽使用。

getElementsByTagName

該方法返回一個(gè)對(duì)象數(shù)組（準(zhǔn)確的說(shuō)是HTMLCollection集合，它不是真正意義上的數(shù)組），每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素。類(lèi)似于getElementById,同樣，該方法只提供一個(gè)參數(shù)，它的參數(shù)是指定標(biāo)簽的名字，示例代碼如下：

document.getElementsByTagname('li') //li是標(biāo)簽的名字

需要注意的是，該方法除了能被document對(duì)象調(diào)用之外，還可以被普通的元素調(diào)用。示例如下：

原生DOM的話首先獲取標(biāo)簽對(duì)象，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

如果已經(jīng)獲取到對(duì)象可以直接獲取標(biāo)記名

<p onclick="alert('您單擊的是：'+this.tagName);">中華人民共和國(guó)</p>

var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');   

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

getElementsByClassName

除了通過(guò)指定標(biāo)簽獲取元素外，DOM還提供了getElementsByClassName方法來(lái)獲取指定class名的元素。不過(guò)由于該方法比較新，較老的瀏覽器還不支持，比如IE6。不過(guò)我們可以通過(guò)hack方式來(lái)彌補(bǔ)老瀏覽器缺陷。該方法調(diào)用的方式如下所示：

document.getElementsByClassName('demo')  //demo為元素指定的class名

和getElementsByTagname一樣， 該方法除了能被document對(duì)象調(diào)用之外，還可以被普通的元素調(diào)用。

對(duì)于比較老的瀏覽器，比如IE6、7我們可以通過(guò)下面的hack方式來(lái)實(shí)現(xiàn)：

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一樣，能通過(guò)選擇器來(lái)獲取元素，實(shí)現(xiàn)的方法和上面的getElementsByClassName差不多，如果有興趣自己可以實(shí)現(xiàn)一套選擇器。不過(guò)我覺(jué)得有上面的三個(gè)方法再結(jié)合事件冒泡，已經(jīng)夠用了，畢竟這三種性能上算是優(yōu)秀的。

以上就是小編為大家?guī)?lái)的JS獲取html元素的標(biāo)記名實(shí)現(xiàn)方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

最新評(píng)論