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