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

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

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

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

通過指定的標(biāo)簽名 - [getElementsByTagName]

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

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

檢查對(duì)應(yīng)的HTML元素是否于參數(shù)選擇器匹配 - [matchesSelector]

一些特殊集合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意:

getElememtsByTagName();不區(qū)分HTML標(biāo)簽的大小寫.

在早期版本的IE中, 由于注釋被實(shí)現(xiàn)為元素, 因而document.getElementsByTagName("*");也會(huì)返回所有的注釋節(jié)點(diǎn).

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

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

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

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

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

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

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;

}

擴(kuò)展閱讀: document.getElementsByClassName理想實(shí)現(xiàn)

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

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

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

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

注意:

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

querySelector()方法并不能應(yīng)用于類似:first-line/:visited等匹配文本節(jié)點(diǎn)的偽元素或者匹配元素狀態(tài)的偽類中.

兼容性:

Chrome FireFox Safari Opera IE
1 3.5 3.2 10 8