介紹：

　　javascript中常見的3種獲取元素的方法，分別是通過元素ID、通過標簽名字和通過類名字來獲取

?

操作如下：

1、getElementById

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

它是document對象特有的函數，只能通過其來調用該方法。其使用的方法如下：

document.getElementById('demo') //demo是元素對應的ID

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

?

2、getElementsByTagName

該方法返回一個對象數組（準確的說是HTMLCollection集合，它不是真正意義上的數組），每個對象分別對應著文檔里有著給定標簽的一個元素。類似于getElementById,同樣，該方法只提供一個參數，它的參數是指定標簽的名字，示例代碼如下：

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

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

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

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

?

3、getElementsByClassName

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

document.getElementsByClassName('demo') //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差不多，如果有興趣自己可以實現一套選擇器。不過我覺得有上面的三個方法再結合事件冒泡，已經夠用了，畢竟 這三種性能上算是優秀的。

Original linker：http://www.jb51.net/article/61737.htm

轉載于:https://www.cnblogs.com/XYQ-208910/p/5824994.html

總結

以上是生活随笔為你收集整理的JavaScript：JavaScript中常见获取对象元素的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。