在DOM中，每個元素都有一或多個特性,這些特性的用途是給出相應(yīng)元素或其內(nèi)容的附加信息。操作特性的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特性值,應(yīng)該傳人" class"而不是 "clas sName",后者只有在通過對象屬性訪問特性時才用。如果給定名稱的特性不存在,getAttribute()返回null。

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

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

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

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

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

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

因為id和align在HTML中是

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

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

alert( div. align); "left"

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

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

onclick屬性時,則會返回一個JavaScript函數(shù)(如果未在元素中指定相應(yīng)特性,則返回null)。這是因為onclick及其他事件處理程序?qū)傩员旧砭蛻?yīng)該被賦予函數(shù)值。

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

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

則創(chuàng)建該屬性并設(shè)置相應(yīng)的值。來看下面的例子：

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

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

div.setAttribute("title", "BaiHengURL:http://www.www16568.cn");

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

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

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

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

div. id="someOtherld";

div.align="left";

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

div.mycolor="red";

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

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

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

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

div.removeAttribute("class");

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

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http: //www.www16568.cn 如轉(zhuǎn)載請注明出處!