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

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()的特性名與實(shí)際的特性名相同。因此要想得到class特性值,應(yīng)該傳人" class"而不是 "clas sName",后者只有在通過(guò)對(duì)象屬性訪(fǎng)問(wèn)特性時(shí)才用。如果給定名稱(chēng)的特性不存在,getAttribute()返回null。

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

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

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

不過(guò),特性的名稱(chēng)是不區(qū)分大小寫(xiě)的,即"ID"和"id"代表的都是同一個(gè)特性。

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

對(duì)象中。以下面的元素為例：

因?yàn)閕d和align在HTML中是

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

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

alert( div. align); "left"

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

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

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

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

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

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

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

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

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

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

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

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

因?yàn)樗刑匦远际菍傩?所以直接紿屬性賦值可以設(shè)置特性的值,如下所示：

div. id="someOtherld";

div.align="left";

不過(guò),像下面這樣為DOM元素添加一個(gè)自定義的屬性,該屬性不會(huì)自動(dòng)成為元素的特性：

div.mycolor="red";

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

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

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

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

div.removeAttribute("class");

這個(gè)方法并不常用,但在序列化DOM元素時(shí),可以通過(guò)它來(lái)確切地指定要包含哪些特性。

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