javascript獲得元素的方法

javascript取得元素的方法：1、透過getElementById取得id屬性的節點物件；2、透過getElementsByTagName取得物件陣列；3、透過getElementsByClassName取得指定class名稱的元素。

本文操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

常見的獲取元素的方法有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差不多，如果有興趣自己可以實作一套選擇器。不過我覺得有上面的三個方法再結合事件冒泡，已經夠用了，畢竟這三種性能上算是優秀的。

推薦學習：《javascript進階教學》

以上是javascript獲得元素的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！