摘要：對象提供了屬性和方法實現定位頁面元素功能。定位匹配選擇器的第一個元素。是返回值，表示定位元素的集合，是一個集合。下面是使用方法的示例代碼循環遍歷所有元素上述代碼通過方法定位頁面中元素名為的元素，并遍歷所有得到的元素，為其元素的屬性添加樣式。

Element 對象提供了屬性和方法實現定位頁面元素功能。該對象與 Document 對象提供的屬性和方法實現定位頁面元素功能的區別在于，Document 對象定位的是 HTML 頁面中所有指定元素，而 Element 對象定位的是指定元素內所有指定元素。

目前 Document 對象提供實現定位頁面元素的方法具有如下幾種:

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

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

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

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

接下來，我們就一一進行學習。

其語法格式如下:

elements = document.getElementsByTagName(name);

在上述語法中，name 是參數，表示所要定位元素的元素名，符號”*”表示所有元素。elements 是返回值，表示定位元素的集合，是一個 NodeList 集合。

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

var elems = document.getElementsByTagName("button");
// 循環遍歷所有元素
for (var i=0; i
上述代碼通過 getElementsByTagName() 方法定位 HTML 頁面中元素名為 button 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。
通過元素的 class 屬性值定位元素
其語法格式如下:
elements = document.getElementsByClassName(names);
在上述語法中，names 是參數，表示所要定位元素的 class 屬性值列表，class 名稱通過空格分隔。
值得注意的是: names 參數可以是一個樣式屬性名稱，也可以是多個樣式屬性名稱。
elements 是返回值，表示定位元素的集合，是一個 NodeList 集合。
下面是使用 getElementsByClassName() 方法的示例代碼:
var elems = document.getElementsByClassName("btn");
// 循環遍歷所有元素
for (var i=0; i
上述代碼通過 getElementsByClassName() 方法定位 HTML 頁面中 class 屬性值為 btn 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。
兼容 IE 8 及之前版本的瀏覽器
getElementsByClassName() 方法只支持 IE 9 版本及之后版本的瀏覽器。也就是說，該方法并不支持 IE 8 及之前版本的瀏覽器。
下圖是不同瀏覽器的不同版本對 getElementsByClassName() 方法的支持情況:

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

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

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

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

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


querySelector() 方法
其語法格式如下:
element = document.querySelector(selectors);
在上述語法中，selectors 是參數，表示選擇器，可以包含一個或多個 CSS 選擇器，多個則以逗號分隔。element 是返回值，表示定位元素的集合，匹配的第一個元素。
下面是使用 querySelector() 方法的示例代碼:
var btn = document.querySelector(’#btn");
// 獲取定位元素的 class 屬性值
var className = btn.className;
// 添加 animate 動畫樣式
className += " animate";
// 將新的 class 屬性值設置
btn.className = className;
上述代碼通過 querySelector() 方法定位 HTML 頁面中 id 屬性值為 btn 的元素，并為其元素的 class 屬性添加 animate 樣式。
querySelectorAll() 方法
其語法格式如下:
elements = document.querySelectorAll(selectors);
在上述語法中，selectors 是參數，表示選擇器，可以包含一個或多個 CSS 選擇器，多個則以逗號分隔。elements 是返回值，表示定位元素的集合，是一個 NodeList 集合。
下面是使用 querySelectorAll() 方法的示例代碼:
var elems = document.querySelectorAll("button");
// 循環遍歷所有元素
for (var i=0; i
上述代碼通過 querySelectorAll() 方法定位 HTML 頁面中元素名為 button 的元素，并遍歷所有得到的元素，為其元素的 class 屬性添加 animate 樣式。

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。
本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。