Element 對象提供了一些方法實現 HTML 元素的屬性操作,這種操作要比 Node 對象提供的方法操作屬性節點要更便捷。
## 獲取指定元素的屬性
Element 對象提供了 getAttribute() 方法用于獲取指定元素的屬性值,其語法結構如下:
```javascript
var attribute = element.getAttribute(attributeName);
```
在上述語法結構中,調用 getAttribute() 方法的 element 表示指定的元素,傳遞的參數 attributeName 則表示指定的屬性名,得到的是指定屬性對應的值。
> **值得注意的是:** 如果指定的屬性不存在,則返回 ?null?或?""?(空字符串)。
我們可以通過以下示例代碼,學習 getAttribute() 方法的具體使用:
```javascript
var btn = document.getElementById('btn');
var className = btn.getAttribute('class');
console.log(className);
```
## 設置指定元素的屬性
Element 對象提供了 setAttribute() 方法用于設置指定元素的屬性值,其語法結構如下:
```javascript
element.setAttribute(name, value);
```
在上述語法結構中,調用 setAttribute() 方法的 element 表示指定的元素,傳遞的參數 name 表示設置指定的屬性名,value 表示設置指定屬性的值。
> **值得注意的是:** 如果該屬性已經存在,則更新該值; 否則將添加一個新的屬性用指定的名稱和值。
我們可以通過以下示例代碼,學習 setAttribute() 方法的具體使用:
```javascript
var btn = document.getElementById('btn');
var className = btn.getAttribute('class');
className += ' animate';
btn.setAttribute('class',className);
```
## 刪除指定元素的屬性
Element 對象提供了 removeAttribute() 方法用于刪除指定元素的屬性,其語法結構如下:
```javascript
element.removeAttribute(attrName);
```
在上述語法結構中,調用 removeAttribute() 方法的 element 表示指定的元素,傳遞的參數 attrName 則表示刪除的屬性名。
> **值得注意的是:**
>
> 1. 刪除屬性盡量使用 removeAttribute() 方法,而不是調用 setAttribute() 方法將指定屬性的值設置為 null。
> 2. 如果刪除的屬性不存在的話,不會引發任何異常。
我們可以通過以下示例代碼,學習 removeAttribute() 方法的具體使用:
```javascript
var btn = document.getElementById('btn');
btn.removeAttribute('class');
```
## 判斷是否含有指定屬性
Element 對象提供了 hasAttribute() 方法用于判斷是否含有指定的屬性,其語法結構如下:
```javascript
var result = element.hasAttribute(attrName);
```
在上述語法結構中,調用 hasAttribute() 方法的 element 表示指定的元素,傳遞的參數 attrName 則表示要判斷的屬性名。
而 result 則是 hasAttribute() 方法的返回值,是一個 Boolean 類型的值。如果結果為 true,則表示含有指定的屬性;如果結果為 false,則表示不含有指定的屬性。
我們可以通過以下示例代碼,學習 hasAttribute() 方法的具體使用:
```javascript
var btn = document.getElementById('btn');
var result = btn.hasAttribute('class');
console.log(result);
```
## 判斷是否含有屬性
Element 對象提供了與 hasAttribute() 方法相似的 hasAttributes() 方法用于判斷是否含有屬性,其語法結構如下:
```javascript
var result = element.hasAttributes();
```
在上述語法結構中,調用 hasAttribute() 方法的 element 表示指定的元素,result 則是 hasAttributes() 方法的返回值,是一個 Boolean 類型的值。
> **值得注意的是:** 該方法在某些瀏覽器中,已被廢棄。
我們可以通過以下示例代碼,學習 hasAttributes() 方法的具體使用:
```javascript
var btn = document.getElementById('btn');
var result = btn.hasAttributes();
console.log(result);
```
- 關于
- 第一章 DOM 是什么
- 第一節 DOM 介紹
- 第二節 DOM 樹結構
- 第二章 Document 對象
- 第一節 Document 對象介紹
- 第二節 定位頁面元素
- 第三節 創建頁面元素
- 第三章 Node 對象
- 第一節 Node 對象介紹
- 第二節 判斷節點類型
- 第三節 遍歷節點
- 第四節 插入節點
- 第五節 刪除節點
- 第六節 替換節點
- 第七節 復制節點
- 第八節 textContent 屬性
- 第四章 Element 對象
- 第一節 Element 對象介紹
- 第二節 DOM 元素樹
- 第三節 定位頁面元素
- 第四節 遍歷元素
- 第五節 屬性操作
- 第六節 innerHTML 屬性
- 第五章 樣式操作
- 第一節 獲取內聯樣式
- 第二節 獲取外聯樣式表
- 第三節 獲取 class 屬性
- 第四節 獲取當前有效樣式
- 第五節 設置內聯樣式
- 第六節 設置 class 屬性
- 第七節 Element 對象的樣式屬性
- 第六章 事件
- 第一節 什么是事件
- 第二節 注冊事件
- 第三節 移除注冊事件
- 第四節 Event 事件對象
- 第五節 獲取目標元素
- 第六節 阻止默認行為
- 第七節 獲取鼠標坐標
- 第八節 事件流
- 第九節 事件委托
- 第七章 表單操作
- 第一節 獲取表單
- 第二節 表單操作
- 第三節 表單驗證
- 第四節 表單提交
- 第八章 BOM
- 第一節 BOM 是什么
- 第二節 Window 對象
- 第三節 Navigator 對象
- 第四節 History 對象
- 第五節 Location 對象
- 第六節 定時器