該方法返回一個(gè)對(duì)象數(shù)組（準(zhǔn)確的說是HTMLCollection集合，它不是真正意義上的數(shù)組），每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素。類似于getElementById,同樣，該方法只提供一個(gè)參數(shù)，它的參數(shù)是指定標(biāo)簽的名字，示例代碼如下：

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

var demo = document.getElementById('demo');

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

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

getElementsByClassName

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

復(fù)制代碼代碼如下:

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

和getElementsByTagname一樣，該方法除了能被document對(duì)象調(diào)用之外，還可以被普通的元素調(diào)用。

對(duì)于比較老的瀏覽器，比如IE6、7我們可以通過下面的hack方式來實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

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一樣，能通過選擇器來獲取元素，實(shí)現(xiàn)的方法和上面的getElementsByClassName差不多，如果有興趣自己可以實(shí)現(xiàn)一套選擇器。不過我覺得有上面的三個(gè)方法再結(jié)合事件冒泡，已經(jīng)夠用了，畢竟這三種性能上算是優(yōu)秀的。

以上就是本文的全部?jī)?nèi)容了，希望對(duì)大家能夠有所幫助。

您可能感興趣的文章: