在DOM中，每個元素都有一或多個特性,這些特性的用途是給出相應元素或其內容的附加信息。操作特性的DOM方法主要有三個,分別是getAttribute()、setAttribute()和removeAttribute()。這三個方法可以針對任何特性使用,包括那些以HTMLElement類型屬性的形式定義的特性。來看下面的例子：

var div=document.getElementByld("myDiv");

alert(div.getAttribute( "id")); "myDiv"

alert(div. getAttribute("class")); "bd"

alert(div. getAttribute("title")); "Body text"

alert(div. getAttribute("lang")); "en"

alert(div. getAttribute( "dir")); "ltr"

注意,傳遞給getAttribute()的特性名與實際的特性名相同。因此要想得到class特性值,應該傳人" class"而不是 "clas sName",后者只有在通過對象屬性訪問特性時才用。如果給定名稱的特性不存在,getAttribute()返回null。

通過getAttribute()方法也可以取得自定義特性(即標準HTML語言中沒有的特性)的值,以 下面的元素為例：

這個元素包含一個名為my_special_attribute的自定義特性,它的值是"hello!"。可以像取得其他特性一樣取得這個值,如下所示：

var value=div.getAttribute("my_special_attribute");

不過,特性的名稱是不區分大小寫的,即"ID"和"id"代表的都是同一個特性。

任何元素的所有特性,也都可以通過DOM元素本身的屬性來訪問。當然,HTMLElement也會有 5個屬性與相應的特性一一對應。不過,只有公認的(非自定義的)特性才會以屬性的形式添加到DOM

對象中。以下面的元素為例：

因為id和align在HTML中是

的公認特性,因此該元素的DOM對象中也將存在對應的屬性。不過,在此南昌網站設計公司百恒網絡開發工程師提示大家自定義特性my_special_attribute在Safari、Opera、Chrome及Firefox中是不存在的; 但IE卻會為自定義特性也創建屬性,如下面的例子所示： alert (div. id); "myDiv"

alert(div.my_special_attribute); //undefined(IE除外)

alert( div. align); "left"

有兩類特殊的特性,它們雖然有對應的屬性名,但屬性的值與通過getAttribute()返回的值并 不相同。第一類特性就是style,用于通過CSS為元素指定樣式。在通過getAttribute()訪問時, 返回的style特性值中包含的是CSS文本,而通過屬性來訪問它則會返回一個對象。由于style屬性是用于以編程方式訪問元素樣式的(本章后面討論),因此并沒有直接映射到style特性。

第二類與眾不同的特性是onclick這樣的事件處理程序。當在元素上使用時,onclick特性中包含的是JavaScript代碼,如果通過getAttribute()訪問,則會返回相應代碼的字符串。而在訪問

onclick屬性時,則會返回一個JavaScript函數(如果未在元素中指定相應特性,則返回null)。這是因為onclick及其他事件處理程序屬性本身就應該被賦予函數值。

由于存在這些差別,在通過JavaScript以編程方式操作DOM時,開發人員經常不使用getAttribute(),而是只使用對象的屬性。只有在取得自定義特性值的情況下,才會使用getAttribute()方法。

與getAttribute()對應的方法是setAttribute(),這個方法接受兩個參數：要設置的特性名和值。如果特性已經存在,setAttribute()會以指定的值替換現有的值;如果特性不存在,setAttribute()

則創建該屬性并設置相應的值。來看下面的例子：

div.setAttribute('id", "BaiHengld");

div. setAttribute("class", "ft");

div.setAttribute("title", "BaiHengURL:http://www.51yjwy.com");

div. setAttribute( " lang", "fr");

div. setAttribute( "dir", "rtl ");

通過setAttribute()方法既可以操作HTML特性也可以操作自定義特性。通過這個方法設置的特性名會被統一轉換為小寫形式,即"ID"最終會變成"id"。

因為所有特性都是屬性,所以直接紿屬性賦值可以設置特性的值,如下所示：

div. id="someOtherld";

div.align="left";

不過,像下面這樣為DOM元素添加一個自定義的屬性,該屬性不會自動成為元素的特性：

div.mycolor="red";

alert( div.getAttribute("mycolor")); //null(IE除外)

這個例子添加了一個名為mycolor的屬性并將它的值設置為"red"。在大多數瀏覽器中,這個屬性都不會自動變成元素的特性,因此想通過getAttribute()取得同名特性的值,結果會返回null。

可是,自定義屬性在IE中會被當作元素的特性,反之亦然。

要介紹的最后一個方法是removeAttribute(),這個方法用于徹底刪除元素的特性。調用這個方法不僅會清除特性的值,而且也會從元素中完全刪除特性,如下所示：

div.removeAttribute("class");

這個方法并不常用,但在序列化DOM元素時,可以通過它來確切地指定要包含哪些特性。

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡 http: //www.51yjwy.com 如轉載請注明出處!