DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中常見獲取元素的方法教程匯總
JavaScript中常見獲取元素的方法教程匯總
編輯:關於JavaScript     

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

以上就是本文的全部內容了,希望對大家能夠有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved