JavaScript中常見獲取元素的方法及其拓展

常見的獲取元素的方法有3種，分別是通過元素id、通過標籤名字和通過類名字來獲取。

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

它是document物件特有的函式，只能通過其來呼叫該方法。其使用的方法如下：

document.getelementbyid('demo') //demo是元素對應的id

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

該方法返回乙個物件陣列（準確的說是htmlcollection集合，它不是真正意義上的陣列），每個物件分別對應著文件裡有著給定標籤的乙個元素。類似於getelementbyid,同樣，該方法只提供乙個引數，它的引數是指定標籤的名字，示例**如下：

document.getelementsbytagname('li')  //li是標籤的名字

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

var demo = document.getelementbyid('demo');
var lis = demo.getelementsbytagname('li');

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

除了通過指定標籤獲取元素外，dom還提供了getelementsbyclassname方法來獲取指定class名的元素。不過由於該方法比較新，較老的瀏覽器還不支援，比如ie6。不過我們可以通過hack方式來彌補老瀏覽器缺陷。該方法呼叫的方式如下所示：

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

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

對於比較老的瀏覽器，比如ie6、7我們可以通過下面的hack方式來實現：

function getelementsbyclassname(node,classname)else 
}return results;
}}

如果你想獲取極致的效能，可以參考這便文章：the ultimate getelementsbyclassname, anno 2008

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