DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript DOM學習第四章 getElementByTagNames
JavaScript DOM學習第四章 getElementByTagNames
編輯:JavaScript基礎知識     
getElementByTagNames(注意是復數的names)會獲得一些tag的元素,然後按照他們的順序保存在一個數組中。這非常的有用,比如在上一章的TOCScript中,就需要獲得整個文章裡面的所有的H3和H4。
我非常希望在node原型中加入這個功能,但是在IE和Safari裡面不行。所以只能把他當做一個普通函數。

使用
getElementByTagNames有兩個參數:
1、一個用逗號分隔的tag名稱字符串。
2、一個可選的開始元素。如果存在則在該元素的子元素中查找這些tag,如果不存在則在整個文檔中查找。
這個函數根據要求的tag名稱返回一個數組(而不是節點列表),按照他們在源代碼中的出現順序排列。對於這個排序需要浏覽器支持sourceIndex或者compareDocumentPosition。如果都不支持(Safari)那麼就按照調用getElementByTagNames()函數時候的tag名稱的順序。
實例1
復制代碼 代碼如下:var headerList = getElementsByTagNames('h1,h2,h3,h4');
現在headerList就是文檔裡包含H1-H4的數組,按照他們出現的順序排序。
實例2
復制代碼 代碼如下:
var element = document.getElementById('test');
var formFieldList = getElementsByTagNames('input,select,textarea',element);

現在formFieldList就是包含在ID為test的元素下的所有子元素中的input,select,TEXTAREA的數組,並且按照他們出現的書序排列。
復制代碼 代碼如下:
function getElementsByTagNames(list,obj) {
    if (!obj) var obj = document;
    var tagNames = list.split(',');
    var resultArray = new Array();
    for (var i=0;i<tagNames.length;i++) {
        var tags = obj.getElementsByTagName(tagNames[i]);
        for (var j=0;j<tags.length;j++) {
            resultArray.push(tags[j]);
        }
    }
    var testNode = resultArray[0];
    if (!testNode) return [];
    if (testNode.sourceIndex) {
        resultArray.sort(function (a,b) {
                return a.sourceIndex - b.sourceIndex;
        });
    }
    else if (testNode.compareDocumentPosition) {
        resultArray.sort(function (a,b) {
                return 3 - (a.compareDocumentPosition(b) & 6);
        });
    }
    return resultArray;
}

解釋
復制代碼 代碼如下:
function getElementsByTagNames(list,obj)
{
if (!obj)var obj = document;

首先定義開始元素obj,如果沒有給出,那麼默認就是document。

復制代碼 代碼如下:
var tagNames = list.split(',');
var resultArray = new Array();

將這些tag名稱以逗號分割。用一個數組來保存結果。

復制代碼 代碼如下:
for (var i=0;i<tagNames.length;i++) {
var tags = obj.getElementsByTagName(tagNames[i]);
for (var j=0;j<tags.length;j++) {
resultArray.push(tags[j]);
}
}

現在我們遍歷所有的tag名稱,就用最簡單的getElementByTagName()方法,然後把結果傳入resultArray。這裡的一個要點是,因為getElementByTagName返回的是節點列表,所以我就不能使用array.concat()來建立新的數組。把元素一個一個的壓入是我能找到的最好的辦法。

我們得到了一個所需的tag名稱的元素的指針數組存儲在resultArray中,但是這些元素還是按照我們所給的tag的順序排列的。我們需要再排個序。

復制代碼 代碼如下:var testNode = resultArray[0];
現在我們開始排序。我們需要知道浏覽器是否支持sourceIndex或者compareDocumentPosition,然後我們對於我們的得到的原始數據做一些檢測

復制代碼 代碼如下:if (!testNode) return [];
如果這裡沒有第一個節點(也就是說結果裡並沒有我們需要的元素),就返回一個空數組。



背景:array.sort()
array.sort()方法有一個可選函數的參數。這個函數用來比較兩個元素(通常稱為a和b)。如果第一個應該在前那麼這個函數就返回一個負數,如果第二個應該在前那麼就返回一個正值。

sourceIndex
如果浏覽器支持sourceIndex,我們就根據元素的sourceIndex來排序。sourceIndex是微軟的一個非常有用的擴展,可以用來知道元素在源代碼中的索引值。頁面種的第一個元素(<HTML>)的索引值就是0,第二個(<head>)就是1,等等。sourceIndex也是getElementByTagName(*)中的元素的索引值。

復制代碼 代碼如下:
if (testNode.sourceIndex) {
resultArray.sort(function (a,b) {
return a.sourceIndex - b.sourceIndex;
});
}

我們用第一個元素的sourceIndex值減去第二個元素的sourceIndex,如果是負值,那麼第一個元素就排在前面,如果是正值,那麼第二個元素排在前面。這就是sort()需要的。現在resultArray中的元素就是根據他們在文檔中的位置來排序的。

compareDocumentPosition
如果浏覽器支持compareDocumentPosition,那麼就用這個辦法來排序。compareDocumentPosition是level3的核心方法,他可以比較兩個節點在文檔中的位置,然後返回一個值:

1 沒有找到

2 在前

4 在後

8 包含

16 被包含

比如,如果一個標簽被包含並且在另一個標簽的後面,那麼就返回16+4=20。

復制代碼 代碼如下:
else if (testNode.compareDocumentPosition) {
resultArray.sort(function (a,b) {
return 3 - (a.compareDocumentPosition(b) & 6);
});
}

我們只對compareDocumentPosition的值中的2、4感興趣:在前或者在後。所以我們將結果和6進行與運算,這樣結果就會是2或者4(當然結果不能是6,因為一個元素不能即在一個元素之前又在一個元素之後)

如果b在a之後則返回4,但是sort()需要一個負數。如果b在a之前則返回2,但是sort()需要一個正數。為了給sort()一個正確的結果我把他們用3來減。這樣就得到1或者-1,這樣sort()就能對元素進行正確的排序,resultArray中的元素也按照他們在文檔種的出現順序排列。

復制代碼 代碼如下:
return resultArray;
}

然後我們返回resultArray給調用它的函數。記住如果浏覽器不支持sourceIndex或者compareDocumentPosition數組就沒有排序。

翻譯地址:http://www.quirksmode.org/dom/getElementsByTagNames.html
轉載請保留以下信息
作者:北玉(tw:@rehawk)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved