常見的獲取元素的方法有3種，分別是通過元素ID、通過標籤名字和通過類名字來獲取。
getElementById
DOM提供了一個名為getElementById的方法，這個方法將返回一個與之對應id屬性的節點對象。使用的時候請注意區分大小寫。
它是document對象特有的函數，只能通過其來調用該方法。其使用的方法如下：
複製代碼代碼如下:
document.getElementById('demo') //demo是元素對應的ID
該方法兼容主流瀏覽器，甚至包括IE6+，可以大膽使用。
getElementsByTagName
該方法返回一個對像數組（準確的說是HTMLCollection集合，它不是真正意義上的數組），每個對象分別對應著文檔裡有著給定標籤的一個元素。類似於getElementById,同樣，該方法只提供一個參數，它的參數是指定標籤的名字，示例代碼如下：
複製代碼代碼如下:
document.getElementsByTagname('li') //li是標籤的名字
需要注意的是，該方法除了能被document對象調用之外，還可以被普通的元素調用。示例如下：
複製代碼代碼如下:
var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');
同樣，該方法兼容主流瀏覽器，甚至包括IE6+，可以大膽使用。
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差不多，如果有興趣自己可以實現一套選擇器。不過我覺得有上面的三個方法再結合事件冒泡，已經夠用了，畢竟這三種性能上算是優秀的。
以上就是本文的全部內容了，希望對大家能夠有所幫助。