【EASYDOM系列教程】之屬性操作

BigNerdCoding 發布于2019-08-21 11:59 / 3305人閱讀

摘要：對象提供了一些方法實現元素的屬性操作，這種操作要比對象提供的方法操作屬性節點要更便捷。值得注意的是如果指定的屬性不存在，則返回或空字符串。如果刪除的屬性不存在的話，不會引發任何異常。

Element 對象提供了一些方法實現 HTML 元素的屬性操作，這種操作要比 Node 對象提供的方法操作屬性節點要更便捷。

獲取指定元素的屬性

Element 對象提供了 getAttribute() 方法用于獲取指定元素的屬性值，其語法結構如下:

var attribute = element.getAttribute(attributeName);

在上述語法結構中，調用 getAttribute() 方法的 element 表示指定的元素，傳遞的參數 attributeName 則表示指定的屬性名，得到的是指定屬性對應的值。

值得注意的是: 如果指定的屬性不存在，則返回 ?null?或?""?（空字符串）。

我們可以通過以下示例代碼，學習 getAttribute() 方法的具體使用:

var btn = document.getElementById("btn");
var className = btn.getAttribute("class");
console.log(className);

設置指定元素的屬性

Element 對象提供了 setAttribute() 方法用于設置指定元素的屬性值，其語法結構如下:

element.setAttribute(name, value);

在上述語法結構中，調用 setAttribute() 方法的 element 表示指定的元素，傳遞的參數 name 表示設置指定的屬性名，value 表示設置指定屬性的值。

值得注意的是: 如果該屬性已經存在，則更新該值; 否則將添加一個新的屬性用指定的名稱和值。

我們可以通過以下示例代碼，學習 setAttribute() 方法的具體使用:

var btn = document.getElementById("btn");
var className = btn.getAttribute("class");
className += " animate";
btn.setAttribute("class",className);

刪除指定元素的屬性

Element 對象提供了 removeAttribute() 方法用于刪除指定元素的屬性，其語法結構如下:

element.removeAttribute(attrName);

在上述語法結構中，調用 removeAttribute() 方法的 element 表示指定的元素，傳遞的參數 attrName 則表示刪除的屬性名。

值得注意的是:

刪除屬性盡量使用 removeAttribute() 方法，而不是調用 setAttribute() 方法將指定屬性的值設置為 null。

如果刪除的屬性不存在的話，不會引發任何異常。

我們可以通過以下示例代碼，學習 removeAttribute() 方法的具體使用:

var btn = document.getElementById("btn");
btn.removeAttribute("class");

判斷是否含有指定屬性

Element 對象提供了 hasAttribute() 方法用于判斷是否含有指定的屬性，其語法結構如下:

var result = element.hasAttribute(attrName);

在上述語法結構中，調用 hasAttribute() 方法的 element 表示指定的元素，傳遞的參數 attrName 則表示要判斷的屬性名。

而 result 則是 hasAttribute() 方法的返回值，是一個 Boolean 類型的值。如果結果為 true，則表示含有指定的屬性；如果結果為 false，則表示不含有指定的屬性。

我們可以通過以下示例代碼，學習 hasAttribute() 方法的具體使用:

var btn = document.getElementById("btn");
var result = btn.hasAttribute("class");
console.log(result);

判斷是否含有屬性

Element 對象提供了與 hasAttribute() 方法相似的 hasAttributes() 方法用于判斷是否含有屬性，其語法結構如下:

var result = element.hasAttributes();

在上述語法結構中，調用 hasAttribute() 方法的 element 表示指定的元素，result 則是 hasAttributes() 方法的返回值，是一個 Boolean 類型的值。

值得注意的是: 該方法在某些瀏覽器中，已被廢棄。

我們可以通過以下示例代碼，學習 hasAttributes() 方法的具體使用:

var btn = document.getElementById("btn");
var result = btn.hasAttributes();
console.log(result);

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。

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

云服務器 GPU云服務器系列之系列之二架構之坑系列 linux系列教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87321.html

【EASYDOM系列教程】之 Element 對象

摘要：而標準規范中提供了對象，主要是依靠元素樹結構訪問和更新頁面的內容。值得注意的是所有的頁面的元素都是對象，而這個對象又是繼承于對象的。我們可以簡單地理解對象是對象的補充。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Element 對象，該對象提供了 HTML 頁面中所有元素所具有的屬性和方法。我們都知道 DOM 標準規范中提供了 Nod...

jeyhan 2019-08-21 11:55 評論0 收藏0
【EASYDOM系列教程】之Node介紹

摘要：對象的作用樹結構主要是依靠節點進行解析，稱為節點樹結構。對象的繼承鏈關系對象是繼承于對象的，是一個用于接收事件的對象。但需要注明作者及來源，并且不能用于商業。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Node 對象，該對象主要提供了用于解析 DOM 節點樹結構的屬性和方法。 Node 對象的作用 DOM 樹結構主要是依靠節點進行解析，...

oliverhuang 2019-08-20 18:16 評論0 收藏0
【EASYDOM系列教程】之創建頁面元素

摘要：對象提供了可以創建元素節點屬性節點和文本節點的方法，方便更新頁面中的元素。是返回值，表示創建的元素。最后，通過方法創建屬性節點，并設置了屬性值為，再將該屬性節點添加到新創建的元素中。 Document 對象提供了可以創建元素節點、屬性節點和文本節點的方法，方便 DOM 更新 HTML 頁面中的元素。創建元素節點 Document 對象提供了 createElement() 方法創建元...

nifhlheimr 2019-08-20 18:04 評論0 收藏0
【EASYDOM系列教程】之獲取內聯樣式

摘要：回顧什么是內聯樣式所謂內聯樣式，就是通過頁面元素的屬性為當前元素定義樣式。對象提供的屬性和方法可以幫助我們獲取樣式的具體內容。遍歷對象由于對象具有屬性，返回該對象的屬性的數量。方法通過獲取的樣式屬性名，這種方式也可以通過方式進行替換。回顧什么是內聯樣式所謂內聯樣式，就是通過 HTML 頁面元素的 style 屬性為當前元素定義 CSS 樣式。以下代碼示例，就是通過 style 屬...

xiaodao 2019-08-22 11:05 評論0 收藏0
【EASYDOM系列教程】之遍歷元素

摘要：對象提供了一系列的屬性和方法用來利用元素樹結構中元素的關系實現遍歷其中的元素。關于元素之間的關系，可以參考元素樹一節有關元素之間關系的內容。該屬性獲取一個包含指定元素的所有子元素的集合。值得注意的是如果當前元素無子節點，則屬性返回。 Element 對象提供了一系列的屬性和方法用來利用 DOM 元素樹結構中元素的關系實現遍歷其中的元素。關于元素之間的關系，可以參考《DOM 元素樹》一...

codeGoogle 2019-08-21 12:00 評論0 收藏0