第五節屬性操作 · EASYDOM

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); ```