摘要：提供了很多方式獲取文檔元素可以很方便的查詢文檔中一個或者多個元素一組元素集合有以下幾種方式通過指定的元素屬性通過指定的屬性通過指定的標簽名通過指定的名通過匹配的選擇器檢查對應的元素是否于參數選擇器匹配一些特殊集合通過屬性獲取元素

DOM提供了很多方式獲取文檔元素, 可以很方便的查詢文檔中一個或者多個元素[一組元素集合], 有以下幾種方式:

通過指定的元素id屬性(attribute) - [getElementById]

通過指定的name屬性 - [getElementsByName]

通過指定的標簽名 - [getElementsByTagName]

通過指定的CSS Class名 - [getElementsByClassName]

通過匹配的CSS選擇器 - [querySelector/querySelectorAll]

檢查對應的HTML元素是否于參數選擇器匹配 - [matchesSelector]

一些特殊集合

通過id屬性獲取元素
任何HTML元素都可以定義id屬性, 但是通常它在文檔中是唯一的. 因而我們通常使用id獲取到的只是一個獨立的唯一的元素對象. 我們可以使用Document對象的getElementById()方法獲取指定的id的元素對象.

document.getElementById("id");
如果在匹配的過程中不存在參數中傳遞的相應的id元素, 則getElementById()方法返回null. id參數的匹配過程中區分大小寫, 但是在IE8之前的版本中getElementById()方法并不區分ID的大小寫, 并且如果頁面中存在多個同名的ID元素, 這個方法只會返回匹配第一個元素對象.

使用getElementById()方法獲取到的是一個元素對象, 因而這個對象也有屬性和方法. 便可以使用結果對象的相關屬性和方法進行其他操作. 如:

var dom = document.getElementById("id");
dom.style.backgroundColor = "#FFF";
注意: 在IE8之前的版本中, getElementById()方法會匹配name屬性與id同名的表單元素. 因而如果需要確保不會獲取到表單元素, 需要在頁面中保證不會出現name值與id名相同的表單元素.

通過name屬性獲取元素
getElementsByName()方法是只有HTMLDocument類型才有的方法, 因而它只對HTML文檔可用. 它用于返回具有指定name特性的所有元素, 即一個NodeList對象(相當于一個包含一組Element對象的只讀數組). 注意這里name屬性不一定是單個的元素, 可能是一組元素的集合(HTMLCollection). 例如具有相同name屬性值的一組表單元素(單選或者復選框).

document.getElementsByName("name");
getElementsByName()方法返回的NodeList對象也有很多屬性和方法, 同樣可以利用它的屬性和方法進行其他操作.

注意: 在某些版本的IE中getElmentsByName()方法會匹配具有同名id屬性值的元素. 因而需要小心的避免.

通過HTML標簽名獲取元素
Document對象有一個getElementsByTagName()方法, 它接受一個HTML標簽名作為參數, 并取得匹配所有的匹配的標簽名的元素, 它也返回一個NodeList對象. 返回的元素集合按照這些元素在文檔中的順序排列.

document.getElementsByTagName("div"); // 獲取文檔中的所有div元素
document.getElementsByTagName("p"); // 獲取文檔中的所有p元素
document.getElementsByTagName("*"); // 獲取文檔中的所有元素

getElementsByTagName()不僅可用于Document對象, 它還可以基于現有的Element對象, 獲取其后代元素.

var firstDiv = document.getElementsByTagName("div")[0];
var spans = firstDiv.getElementsByTagName("span"); // 獲取文檔中第一個div中的所有span元素

同樣的, 使用getElementsByTagName()方法獲取的NodeList也有很多屬性和方法, 可以利用相關的屬性和方法進行其他操作. 下面展示了幾個常見的屬性和方法.

var div = document.getElementsByTagName("div");
div.length; // 獲取文檔中div的數量
div[0].id; // 獲取文檔中第一個div的id屬性值, 如果它存在
div.item(0).id; // 通過NodeList的item方法獲取文檔中第一個div的id屬性值

var images = document.getElementsByTagName("img");
images.nameItem("name"); // 獲取images集合中具有name屬性值的元素

注意:

getElememtsByTagName();不區分HTML標簽的大小寫.

在早期版本的IE中, 由于注釋被實現為元素, 因而document.getElementsByTagName("*");也會返回所有的注釋節點.

通過ClassName獲取元素
HTML5中添加了一個getElementsByClassName()方法用于獲取指定className(class在JavaScript中是關鍵字, 因而在DOM操作中使用className替代)值的元素. 這個方法可以通過Document對象或者現有的元素對象調用. 它接受一個或多個[空格分割]className值(順序無關), 返回匹配的NodeList對象(它返回的是后代元素).

var items = document.getElementsByClassName("item"); // 獲取文檔中所有className為"item"的元素
var doms = document.getElementsByClassName("a b"); // 獲取文檔中所有同時具有className為a和b的元素

var users = document.getElementById("list").getElementsByClassName("user"); // 獲取文檔中id為list的元素下所有className為user的元素

使用getElementsByClassName()不在局限于使用id或者標簽名的方式獲取元素. 但注意它返回的是NodeList對象, 一個只讀形式的類數組對象. 在使用過程需要避免直接對NodeList進行操作.

注意: 在"怪異模式中"getElementsByClassName()方法在匹配className時不區分大小寫.

由于IE9之前的版本并不支持這個方法, 因而需要基于現有的技術模擬實現. 下面提供一個<>作者實現的版本:

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null ){
        node = document;
    }
    if ( tag == null ){
        tag = "*";
    }

    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|s)"+searchClass+"(s|$)");

    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
                j++;
        }
    }

    return classElements;

}

擴展閱讀: document.getElementsByClassName理想實現

querySelector()方法
W3C標準的Selector API Level1中提供了兩個核心的方法querySelector()和querySelectorAll(), 可以通過Document對象或者基于現有的元素, 以及在文檔片段(DocumentFragment)中調用這兩個方法獲取匹配的元素.

querySelector()方法接受一個CSS選擇符字符串, 返回與這個選擇符模式匹配的第一個元素. 如果沒有匹配則返回null.

var body = document.querySelector("body"); // 獲取body元素
var firstLi = document.querySelector("#list li:first-child"); // 獲取id為list的元素中第一個li元素

var dom = document.getElementById("id");
var lastLi = dom.querySelector("li:last-child");
// 獲取文檔中id為id的元素下最后一個li元素, 通過現有的元素調用querySelector方法獲取

注意:

規范中并沒有規定要求querySelector()支持CSS3選擇器

querySelector()方法并不能應用于類似:first-line/:visited等匹配文本節點的偽元素或者匹配元素狀態的偽類中.

兼容性:

Chrome FireFox Safari Opera IE
1 3.5 3.2 10 8