摘要：對(duì)象提供了屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能，這也是的標(biāo)準(zhǔn)規(guī)范中對(duì)象的主要應(yīng)用之一。是返回值，表示定位元素的集合，是一個(gè)集合。定位匹配選擇器的第一個(gè)元素。方法定位頁(yè)面元素所返回的集合就是靜態(tài)集合。

Document 對(duì)象提供了屬性和方法實(shí)現(xiàn)定位頁(yè)面元素功能，這也是 DOM 的標(biāo)準(zhǔn)規(guī)范中 Document 對(duì)象的主要應(yīng)用之一。

目前 Document 對(duì)象提供實(shí)現(xiàn)定位頁(yè)面元素的方法具有如下幾種:

getElementById()方法：通過(guò)頁(yè)面元素的 id 屬性值定位元素。

getElementsByName()方法：通過(guò)頁(yè)面元素的 name 屬性值定位元素。

getElementsByTagName()方法：通過(guò)頁(yè)面元素的元素名定位元素。

getElementsByClassName()方法：通過(guò)頁(yè)面元素的 class 屬性值定位元素。

querySelector()方法：通過(guò) CSS 選擇器定位第一個(gè)匹配的元素。

querySelectorAll()方法：通過(guò) CSS 選擇器定位所有匹配的元素。

接下來(lái)，我們就一一進(jìn)行學(xué)習(xí)。

HTML 頁(yè)面元素的 id 屬性的特點(diǎn)是唯一、不可重復(fù)的，所以通過(guò)這種方式定位的 HTML 頁(yè)面元素也是唯一的。

其語(yǔ)法格式如下:

element = document.getElementById(id);

在上述語(yǔ)法中，id 是參數(shù)，表示所要定位元素的 id 屬性值，是一個(gè)大小寫(xiě)敏感的字符串。element 是返回值，表示定位的元素，是一個(gè) Element 對(duì)象。

值得注意的是: 如果 HTML 頁(yè)面中不存在具有該 id 屬性值的元素，則返回 null。

下面是使用 getElementById() 方法的示例代碼:

var btn = document.getElementById("btn");
// 獲取定位元素的 class 屬性值
var className = btn.className;
// 添加 animate 動(dòng)畫(huà)樣式
className += " animate";
// 將新的 class 屬性值設(shè)置
btn.className = className;

上述代碼通過(guò) getElementById() 方法定位 HTML 頁(yè)面中 id 屬性值為 btn 的元素，并為其元素的 class 屬性添加 animate 樣式。

完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: getElementById()方法完整示例代碼

其語(yǔ)法格式如下:

elements = document.getElementsByName(name);

在上述語(yǔ)法中，name 是參數(shù)，表示所要定位元素的 name 屬性值，是一個(gè)大小寫(xiě)敏感的字符串。elements 是返回值，表示定位元素的集合，是一個(gè) NodeList 集合。

下面是使用 getElementsByName() 方法的示例代碼:

var elems = document.getElementsByName("btn");
// 循環(huán)遍歷所有元素
for (var i=0; i
上述代碼通過(guò) getElementsByName() 方法定位 HTML 頁(yè)面中 name 屬性值為 btn 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。
完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: getElementsByName()方法完整示例代碼
通過(guò)元素的元素名定位元素
其語(yǔ)法格式如下:
elements = document.getElementsByTagName(name);
在上述語(yǔ)法中，name 是參數(shù)，表示所要定位元素的元素名，符號(hào)”*”表示所有元素。elements 是返回值，表示定位元素的集合，是一個(gè) NodeList 集合。
下面是使用 getElementsByTagName() 方法的示例代碼:
var elems = document.getElementsByTagName("button");
// 循環(huán)遍歷所有元素
for (var i=0; i
上述代碼通過(guò) getElementsByTagName() 方法定位 HTML 頁(yè)面中元素名為 button 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。
完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: getElementsByTagName()方法完整示例代碼
通過(guò)元素的 class 屬性值定位元素
其語(yǔ)法格式如下:
elements = document.getElementsByClassName(names);
在上述語(yǔ)法中，names 是參數(shù)，表示所要定位元素的 class 屬性值列表，class 名稱通過(guò)空格分隔。
值得注意的是: names 參數(shù)可以是一個(gè)樣式屬性名稱，也可以是多個(gè)樣式屬性名稱。
elements 是返回值，表示定位元素的集合，是一個(gè) NodeList 集合。
下面是使用 getElementsByClassName() 方法的示例代碼:
var elems = document.getElementsByClassName("btn");
// 循環(huán)遍歷所有元素
for (var i=0; i
上述代碼通過(guò) getElementsByClassName() 方法定位 HTML 頁(yè)面中 class 屬性值為 btn 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。
完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: getElementsByClassName()方法完整示例代碼
兼容 IE 8 及之前版本的瀏覽器
getElementsByClassName() 方法只支持 IE 9 版本及之后版本的瀏覽器。也就是說(shuō)，該方法并不支持 IE 8 及之前版本的瀏覽器。
下圖是不同瀏覽器的不同版本對(duì) getElementsByClassName() 方法的支持情況:

由于國(guó)內(nèi)的生產(chǎn)環(huán)境中，依舊存在使用 IE 8 及之前版本瀏覽器的情況。所以，我們需要自定義 getElementsByClassName() 方法解決瀏覽器的兼容問(wèn)題。
function getElementsByClassName(element, names) {

}
上述自定義兼容方法接受兩個(gè)參數(shù)，element 參數(shù)表示調(diào)用 getElementsByClassName() 方法的對(duì)象（目前為 Document 對(duì)象），names 參數(shù)表示所要定位元素的 class 屬性值列表。
function getElementsByClassName(element, names) {
    // 檢測(cè) getElementsByClassName() 是否可用
    if (element.getElementsByClassName) {
        // 優(yōu)先使用 W3C 規(guī)范
        return element.getElementsByClassName(names);
    }else {
        // 人為解決 IE 8 之前版本不兼容問(wèn)題

    }
}
這里我們要優(yōu)先使用 W3C 規(guī)范的方法。所以，需要先判斷當(dāng)前瀏覽器環(huán)境是否存在 getElementsByClassName() 方法。
如果存在，就使用原本的 getElementsByClassName() 方法。如果不存在，就使用自定義代碼來(lái)實(shí)現(xiàn)。
function getElementsByClassName(element, names) {
    // 檢測(cè) getElementsByClassName() 是否可用
    if (element.getElementsByClassName) {
        // 優(yōu)先使用 W3C 規(guī)范
        return element.getElementsByClassName(names);
    }else {
        // 人為解決 IE 8 之前版本不兼容問(wèn)題
        
        // 獲取所有后代元素節(jié)點(diǎn)
        var elements = element.getElementsByTagName("*");
        // 定義空數(shù)組
        var result = [];
        var element, classNameStr, flag;
        // 將樣式名稱改為數(shù)組類型
        names = names.split(" ");
        // 循環(huán)遍歷所有元素節(jié)點(diǎn)
        for (var i=0; element = elements[i]; i++) {
              // 獲取每個(gè)元素節(jié)點(diǎn)的樣式名稱
            classNameStr = " " + element.className + " ";
            // 開(kāi)啟開(kāi)關(guān)
            flag = true; 
            // 循環(huán)遍歷所有的樣式名稱
            for (var j=0, name; name = names[j]; j++) {
                // 判斷當(dāng)前元素節(jié)點(diǎn)的樣式名稱中是否包含指定的樣式名稱
                if (classNameStr.indexOf(" " + name + " ") == -1){
                    // 如果不包含，則關(guān)閉開(kāi)關(guān)，并且結(jié)束循環(huán)
                    flag = false;
                    break;
                }
            } 
            // 判斷當(dāng)前元素節(jié)點(diǎn)是否包含指定樣式名稱
            if (flag) {
                // 如果包含，則將當(dāng)前元素節(jié)點(diǎn)添加到數(shù)組中
                result.push(element);
            }
        } 
        // 返回?cái)?shù)組(所有包含指定樣式名稱的元素節(jié)點(diǎn))
        return result;
    }
}
通過(guò) CSS 選擇器定位元素
CSS 中的選擇器可以很便利地定位 HTML 頁(yè)面元素，DOM 的標(biāo)準(zhǔn)規(guī)范中也提供類似的方法。

querySelector(): 定位匹配選擇器的第一個(gè)元素。

querySelectorAll(): 定位匹配選擇器的所有元素。


querySelector() 方法
其語(yǔ)法格式如下:
element = document.querySelector(selectors);
在上述語(yǔ)法中，selectors 是參數(shù)，表示選擇器，可以包含一個(gè)或多個(gè) CSS 選擇器，多個(gè)則以逗號(hào)分隔。element 是返回值，表示定位元素的集合，匹配的第一個(gè)元素。
下面是使用 querySelector() 方法的示例代碼:
var btn = document.querySelector(’#btn");
// 獲取定位元素的 class 屬性值
var className = btn.className;
// 添加 animate 動(dòng)畫(huà)樣式
className += " animate";
// 將新的 class 屬性值設(shè)置
btn.className = className;
上述代碼通過(guò) querySelector() 方法定位 HTML 頁(yè)面中 id 屬性值為 btn 的元素，并為其元素的 class 屬性添加 animate 樣式。
完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: querySelector()方法完整示例代碼
querySelectorAll() 方法
其語(yǔ)法格式如下:
elements = document.querySelectorAll(selectors);
在上述語(yǔ)法中，selectors 是參數(shù)，表示選擇器，可以包含一個(gè)或多個(gè) CSS 選擇器，多個(gè)則以逗號(hào)分隔。elements 是返回值，表示定位元素的集合，是一個(gè) NodeList 集合。
下面是使用 querySelectorAll() 方法的示例代碼:
var elems = document.querySelectorAll("button");
// 循環(huán)遍歷所有元素
for (var i=0; i
上述代碼通過(guò) querySelectorAll() 方法定位 HTML 頁(yè)面中元素名為 button 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。
完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: querySelectorAll()方法完整示例代碼
節(jié)點(diǎn)集合 NodeList
NodeList 是一組元素節(jié)點(diǎn)的集合，每個(gè)節(jié)點(diǎn)具有相應(yīng)的索引值（從 0 開(kāi)始的數(shù)字，類似于數(shù)組）。
元素節(jié)點(diǎn)在 NodeList 集合中存儲(chǔ)的順序與它們?cè)?HTML 頁(yè)面中的順序保持一致。
NodeList 的屬性 length 表示 NodeList 對(duì)象中包含的節(jié)點(diǎn)個(gè)數(shù)。方法 item(index) 表示返回 NodeList 對(duì)象中指定索引的節(jié)點(diǎn)。如果索引值越界,則返回 null。
NodeList 集合分為兩種: 動(dòng)態(tài) NodeList 和靜態(tài) NodeList。
動(dòng)態(tài)的 NodeList 集合
所謂動(dòng)態(tài)的 NodeList 集合，就是如果文檔中的節(jié)點(diǎn)樹(shù)發(fā)生變化，則已經(jīng)存在的 NodeList 對(duì)象也可能會(huì)變化。
以下幾種定位 HTML 頁(yè)面元素的方法返回的都是動(dòng)態(tài)的 NodeList 集合。

getElementsByName()方法：通過(guò)頁(yè)面元素的 name 屬性值定位元素。

getElementsByTagName()方法：通過(guò)頁(yè)面元素的元素名定位元素。

getElementsByClassName()方法：通過(guò)頁(yè)面元素的 class 屬性值定位元素。


我們可以通過(guò)以下示例代碼，體驗(yàn)動(dòng)態(tài) NodeList 集合的特點(diǎn):
var elems = document.getElementsByTagName("button");
console.log(elems.length);// 輸出 3

// 添加一個(gè)新的button按鈕
var btn = document.createElement("button");
btn.setAttribute("class","button");
var text = document.createTextNode("New Button");
btn.appendChild(text);

var div = document.getElementsByClassName("button-group")[0];
div.appendChild(btn);

console.log(elems.length);// 輸出 4
上述代碼通過(guò) getElementsByTagName() 方法定位 HTML 頁(yè)面中所有的 button 元素，測(cè)試打印 button 元素的個(gè)數(shù)是 3 個(gè)。
然后，我們創(chuàng)建一個(gè)新的 button 元素，并且將其添加到 HTML 頁(yè)面中，再測(cè)試打印 button 元素的個(gè)數(shù)是 4 個(gè)。
值得注意的是: 我們?cè)诘诙螠y(cè)試打印 button 元素的個(gè)數(shù)時(shí)，并沒(méi)有重新定位 HTML 頁(yè)面中的 button 元素。
完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: 動(dòng)態(tài) NodeList 集合完整示例代碼

靜態(tài) NodeList 集合
所謂靜態(tài) NodeList 集合，就是對(duì)文檔對(duì)象模型的任何改動(dòng)都不會(huì)影響集合的內(nèi)容。
querySelectorAll() 方法定位 HTML 頁(yè)面元素所返回的 NodeList 集合就是靜態(tài) NodeList 集合。
我們可以通過(guò)以下示例代碼，體驗(yàn)靜態(tài) NodeList 集合的特點(diǎn):
var elems = document.querySelectorAll("button");
console.log(elems.length);// 輸出 3

// 添加一個(gè)新的button按鈕
var btn = document.createElement("button");
btn.setAttribute("class","button");
var text = document.createTextNode("New Button");
btn.appendChild(text);

var div = document.getElementsByClassName("button-group")[0];
div.appendChild(btn);

console.log(elems.length);// 輸出 3
上述代碼通過(guò) querySelectorAll() 方法定位 HTML 頁(yè)面中所有的 button 元素，測(cè)試打印 button 元素的個(gè)數(shù)是 3 個(gè)。
然后，我們創(chuàng)建一個(gè)新的 button 元素，并且將其添加到 HTML 頁(yè)面中，再測(cè)試打印 button 元素的個(gè)數(shù)依舊是 3 個(gè)。
完整示例代碼請(qǐng)點(diǎn)擊右邊的鏈接: 靜態(tài) NodeList 集合完整示例代碼
定位頁(yè)面元素屬性
Document 對(duì)象也提供了一些屬性，來(lái)定位 HTML 頁(yè)面中一些比較特殊的元素。

documentElement：獲取 HTML 頁(yè)面中的  元素。

head：獲取 HTML 頁(yè)面中的  元素。

title：獲取 HTML 頁(yè)面中的