Element 對象提供了屬性和方法實現定位頁面元素功能。該對象與 Document 對象提供的屬性和方法實現定位頁面元素功能的區別在于,Document 對象定位的是 HTML 頁面中所有指定元素,而 Element 對象定位的是指定元素內所有指定元素。
## 定位頁面元素方法
目前 Document 對象提供實現定位頁面元素的方法具有如下幾種:
- getElementsByTagName()方法:通過頁面元素的元素名定位元素。
- getElementsByClassName()方法:通過頁面元素的 class 屬性值定位元素。
- querySelector()方法:通過 CSS 選擇器定位第一個匹配的元素。
- querySelectorAll()方法:通過 CSS 選擇器定位所有匹配的元素。
接下來,我們就一一進行學習。
## 通過元素的元素名定位元素
其語法格式如下:
```javascript
elements = document.getElementsByTagName(name);
```
在上述語法中,name 是參數,表示所要定位元素的元素名,符號”*”表示所有元素。elements 是返回值,表示定位元素的集合,是一個 NodeList 集合。
下面是使用 getElementsByTagName() 方法的示例代碼:
```javascript
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 樣式。
## 通過元素的 class 屬性值定位元素
其語法格式如下:
```javascript
elements = document.getElementsByClassName(names);
```
在上述語法中,names 是參數,表示所要定位元素的 class 屬性值列表,class 名稱通過空格分隔。
> **值得注意的是:** names 參數可以是一個樣式屬性名稱,也可以是多個樣式屬性名稱。
elements 是返回值,表示定位元素的集合,是一個 NodeList 集合。
下面是使用 getElementsByClassName() 方法的示例代碼:
```javascript
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 樣式。
#### 兼容 IE 8 及之前版本的瀏覽器
getElementsByClassName() 方法只支持 IE 9 版本及之后版本的瀏覽器。也就是說,該方法并不支持 IE 8 及之前版本的瀏覽器。
下圖是不同瀏覽器的不同版本對 getElementsByClassName() 方法的支持情況:

由于國內的生產環境中,依舊存在使用 IE 8 及之前版本瀏覽器的情況。所以,我們需要自定義 getElementsByClassName() 方法解決瀏覽器的兼容問題。
```javascript
function getElementsByClassName(element, names) {
}
```
上述自定義兼容方法接受兩個參數,element 參數表示調用 getElementsByClassName() 方法的對象(目前為 Document 對象),names 參數表示所要定位元素的 class 屬性值列表。
```javascript
function getElementsByClassName(element, names) {
// 檢測 getElementsByClassName() 是否可用
if (element.getElementsByClassName) {
// 優先使用 W3C 規范
return element.getElementsByClassName(names);
}else {
// 人為解決 IE 8 之前版本不兼容問題
}
}
```
這里我們要優先使用 W3C 規范的方法。所以,需要先判斷當前瀏覽器環境是否存在 getElementsByClassName() 方法。
如果存在,就使用原本的 getElementsByClassName() 方法。如果不存在,就使用自定義代碼來實現。
```javascript
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() 方法
其語法格式如下:
```javascript
element = document.querySelector(selectors);
```
在上述語法中,selectors 是參數,表示選擇器,可以包含一個或多個 CSS 選擇器,多個則以逗號分隔。element 是返回值,表示定位元素的集合,匹配的第一個元素。
下面是使用 querySelector() 方法的示例代碼:
```javascript
var btn = document.querySelector(’#btn');
// 獲取定位元素的 class 屬性值
var className = btn.className;
// 添加 animate 動畫樣式
className += ' animate';
// 將新的 class 屬性值設置
btn.className = className;
```
上述代碼通過 querySelector() 方法定位 HTML 頁面中 id 屬性值為 btn 的元素,并為其元素的 class 屬性添加 animate 樣式。
#### querySelectorAll() 方法
其語法格式如下:
```javascript
elements = document.querySelectorAll(selectors);
```
在上述語法中,selectors 是參數,表示選擇器,可以包含一個或多個 CSS 選擇器,多個則以逗號分隔。elements 是返回值,表示定位元素的集合,是一個 NodeList 集合。
下面是使用 querySelectorAll() 方法的示例代碼:
```javascript
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 樣式。
- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器