【EASYDOM系列教程】之定位頁面元素

時間  2020-01-11
標籤 EASYDOM系列教程 定位 頁面 元素 欄目 系統網絡 简体版
原文   原文鏈接

Document 對象提供了屬性和方法實現定位頁面元素功能，這也是 DOM 的標準規範中 Document 對象的主要應用之一。javascript

定位頁面元素方法

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

  • getElementById()方法：經過頁面元素的 id 屬性值定位元素。java

  • getElementsByName()方法：經過頁面元素的 name 屬性值定位元素。segmentfault

  • getElementsByTagName()方法：經過頁面元素的元素名定位元素。數組

  • getElementsByClassName()方法：經過頁面元素的 class 屬性值定位元素。瀏覽器

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

  • querySelectorAll()方法：經過 CSS 選擇器定位全部匹配的元素。學習

接下來，咱們就一一進行學習。測試

經過元素的 ID 屬性值定位元素

HTML 頁面元素的 id 屬性的特色是惟1、不可重複的，因此經過這種方式定位的 HTML 頁面元素也是惟一的。動畫

其語法格式以下:

element = document.getElementById(id);

在上述語法中，id 是參數，表示所要定位元素的 id 屬性值，是一個大小寫敏感的字符串。element 是返回值，表示定位的元素，是一個 Element 對象。

值得注意的是: 若是 HTML 頁面中不存在具備該 id 屬性值的元素，則返回 null。

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

var btn = document.getElementById('btn');
// 獲取定位元素的 class 屬性值
var className = btn.className;
// 添加 animate 動畫樣式
className += ' animate';
// 將新的 class 屬性值設置
btn.className = className;

上述代碼經過 getElementById() 方法定位 HTML 頁面中 id 屬性值爲 btn 的元素，併爲其元素的 class 屬性添加 animate 樣式。

完整示例代碼請點擊右邊的連接: getElementById()方法完整示例代碼

經過元素的 name 屬性值定位元素

其語法格式以下:

elements = document.getElementsByName(name);

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

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

var elems = document.getElementsByName('btn');
// 循環遍歷全部元素
for (var i=0; i<elems.length; i++) {
    var elem = elems[i]; 
    var className = elem.className; 
    className += ' animate'; 
    elem.className = className;
}

上述代碼經過 getElementsByName() 方法定位 HTML 頁面中 name 屬性值爲 btn 的元素，並遍歷全部獲得的元素，爲其元素的 class 屬性添加 animate 樣式。

完整示例代碼請點擊右邊的連接: getElementsByName()方法完整示例代碼

經過元素的元素名定位元素

其語法格式以下:

elements = document.getElementsByTagName(name);

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

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

var elems = document.getElementsByTagName('button');
// 循環遍歷全部元素
for (var i=0; i<elems.length; i++) {
    var elem = elems[i]; 
    var className = elem.className; 
    className += ' animate'; 
    elem.className = className;
}

上述代碼經過 getElementsByTagName() 方法定位 HTML 頁面中元素名爲 button 的元素，並遍歷全部獲得的元素，爲其元素的 class 屬性添加 animate 樣式。

完整示例代碼請點擊右邊的連接: getElementsByTagName()方法完整示例代碼

經過元素的 class 屬性值定位元素

其語法格式以下:

elements = document.getElementsByClassName(names);

在上述語法中，names 是參數，表示所要定位元素的 class 屬性值列表，class 名稱經過空格分隔。

值得注意的是: names 參數能夠是一個樣式屬性名稱，也能夠是多個樣式屬性名稱。

elements 是返回值，表示定位元素的集合，是一個 NodeList 集合。

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

var elems = document.getElementsByClassName('btn');
// 循環遍歷全部元素
for (var i=0; i<elems.length; i++) {
    var elem = elems[i]; 
    var className = elem.className; 
    className += ' animate'; 
    elem.className = className;
}

上述代碼經過 getElementsByClassName() 方法定位 HTML 頁面中 class 屬性值爲 btn 的元素，並遍歷全部獲得的元素，爲其元素的 class 屬性添加 animate 樣式。

完整示例代碼請點擊右邊的連接: getElementsByClassName()方法完整示例代碼

兼容 IE 8 及以前版本的瀏覽器

getElementsByClassName() 方法只支持 IE 9 版本及以後版本的瀏覽器。也就是說，該方法並不支持 IE 8 及以前版本的瀏覽器。

下圖是不一樣瀏覽器的不一樣版本對 getElementsByClassName() 方法的支持狀況:

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 樣式。

完整示例代碼請點擊右邊的連接: querySelector()方法完整示例代碼

querySelectorAll() 方法

其語法格式以下:

elements = document.querySelectorAll(selectors);

在上述語法中，selectors 是參數，表示選擇器，能夠包含一個或多個 CSS 選擇器，多個則以逗號分隔。elements 是返回值，表示定位元素的集合，是一個 NodeList 集合。

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

var elems = document.querySelectorAll('button');
// 循環遍歷全部元素
for (var i=0; i<elems.length; i++) {
    var elem = elems[i]; 
    var className = elem.className; 
    className += ' animate'; 
    elem.className = className;
}

上述代碼經過 querySelectorAll() 方法定位 HTML 頁面中元素名爲 button 的元素，並遍歷全部獲得的元素，爲其元素的 class 屬性添加 animate 樣式。

完整示例代碼請點擊右邊的連接: querySelectorAll()方法完整示例代碼

節點集合 NodeList

NodeList 是一組元素節點的集合，每一個節點具備相應的索引值（從 0 開始的數字，相似於數組）。

元素節點在 NodeList 集合中存儲的順序與它們在 HTML 頁面中的順序保持一致。

NodeList 的屬性 length 表示 NodeList 對象中包含的節點個數。方法 item(index) 表示返回 NodeList 對象中指定索引的節點。若是索引值越界,則返回 null。

NodeList 集合分爲兩種: 動態 NodeList 和靜態 NodeList。

動態的 NodeList 集合

所謂動態的 NodeList 集合，就是若是文檔中的節點樹發生變化，則已經存在的 NodeList 對象也可能會變化。

如下幾種定位 HTML 頁面元素的方法返回的都是動態的 NodeList 集合。

  • getElementsByName()方法：經過頁面元素的 name 屬性值定位元素。

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

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

咱們能夠經過如下示例代碼，體驗動態 NodeList 集合的特色:

var elems = document.getElementsByTagName('button');
console.log(elems.length);// 輸出 3

// 添加一個新的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

上述代碼經過 getElementsByTagName() 方法定位 HTML 頁面中全部的 button 元素，測試打印 button 元素的個數是 3 個。

而後，咱們建立一個新的 button 元素，而且將其添加到 HTML 頁面中，再測試打印 button 元素的個數是 4 個。

值得注意的是: 咱們在第二次測試打印 button 元素的個數時，並無從新定位 HTML 頁面中的 button 元素。

完整示例代碼請點擊右邊的連接: 動態 NodeList 集合完整示例代碼

靜態 NodeList 集合

所謂靜態 NodeList 集合，就是對文檔對象模型的任何改動都不會影響集合的內容。

querySelectorAll() 方法定位 HTML 頁面元素所返回的 NodeList 集合就是靜態 NodeList 集合。

咱們能夠經過如下示例代碼，體驗靜態 NodeList 集合的特色:

var elems = document.querySelectorAll('button');
console.log(elems.length);// 輸出 3

// 添加一個新的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

上述代碼經過 querySelectorAll() 方法定位 HTML 頁面中全部的 button 元素，測試打印 button 元素的個數是 3 個。

而後，咱們建立一個新的 button 元素，而且將其添加到 HTML 頁面中，再測試打印 button 元素的個數依舊是 3 個。

完整示例代碼請點擊右邊的連接: 靜態 NodeList 集合完整示例代碼

定位頁面元素屬性

Document 對象也提供了一些屬性，來定位 HTML 頁面中一些比較特殊的元素。

  • documentElement：獲取 HTML 頁面中的 <html> 元素。

  • head：獲取 HTML 頁面中的 <head> 元素。

  • title：獲取 HTML 頁面中的 <title> 元素。

  • body：獲取 HTML 頁面中的 <body> 元素。

  • links：獲取 HTML 頁面中的全部 <a> 元素。

  • images：獲取 HTML 頁面中的全部 <img> 元素。

咱們能夠定義一個包含以上元素的 HTML 頁面，而後經過如下示例代碼進行測試:

console.log(document.documentElement);
console.log(document.head);
console.log(document.body);
console.log(document.title);
console.log(document.links);
console.log(document.images);

本教程免費開源，任何人均可以避免費學習、分享，甚至能夠進行修改。但須要註明做者及來源，而且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程