DOM之屬性(attribute)和自定義對象屬性(property)_html/css_WEB-ITnose

DOM之屬性(attribute)和自定義對象屬性(property)_html/css_WEB-ITnose

DOM之屬性(attribute)和自定義對象屬性(property)_html/css_WEB-ITnose:DOM節點有一些屬性和對象屬性. 有時候我們會把他們搞混淆, 因為他們是相關聯的, 但是他們真的是兩個不同的東西. 特性 DOM節點是一個對象. 因此它可以存儲自定義的對象屬性和方法,就像任何的Javascript對象. 下面的例子是指定分配一個對象給document.

推薦度：

點擊下載本文 文檔為doc格式

document.body.myData = { name: 'John'}alert(document.body.myData.name) // Johndocument.body.sayHi = function() { alert(this.nodeName)} document.body.sayHi() // BODY

document.body.custom = 5var list = []for(var key in document.body) { list.push(key)}alert(list.join('\n'))

>

下面的例子設置一些屬性.

運行上面這段代碼的時候, 有下面幾點提示:

1. getAttribute('ABOUT')使用大寫名稱, 這是沒關系的.

2. 你可以試著分配一個字符串或者另外類型的原始值, 都會變成一個字符串. 對象會自動轉換, 但是基于其他類型的值, IE會有一些問題,

3. innerHTML會包含一個新的屬性"test"

對象屬性和屬性同步化

DOM節點的每一種類型有著標準的對象屬性. 例如, 'A' 標簽元素. 他有href和accessKey屬性, 以及其他特定的屬性. 除此之外, 他會繼承"id"屬性以及其他的HTMLElement的屬性.

標準的DOM對象屬性和屬性是同步的.

id

例如, 瀏覽器id屬性和id對象屬性是同步存在的:

href

同步不保證有相同的值.下面是設置href屬性的例子:

這是因為href的正確連接, 符合W3C規范

另外的屬性, 他們是同步的, 但不是復制. 例如下面的input.checked:

input.checked對象屬性值在true和false之間, 但是屬性則不會管這些.

value

同樣創建對象屬性與之同步, 只有一種方式.

下面例子中,input.value從屬性設置中同步:

但是從對象屬性中創建, 屬性則同步不了:

value在對象屬性更新后, 屬性的值還是原來的值. 例如當訪問者輸入一些內容的時候, 如果input被改變或者重新被設置,原始值可以用來做檢查.

class/className

名稱不一樣: "class"屬性與之對應的對象屬性是"className"

因為 "class" 是在javascript中是保留字, 所以則會選擇另外的名稱className來與class想匹配

提示, 這個例子在IE<9下是不能正常運行的, 因為奇怪的方式屬性和對象屬性混合使用.

我們可以讓它執行好, 但是僅使用className對象屬性來管理class,不是attribute.

1. 指定一個div到一個變量

2. 獲取data-widgetName的屬性值

文檔

 Select the genre 

有趣的老版本IE

首先,IE<9同步所有的對象屬性和屬性:

document.body.setAttribute('try-in-ie', 123)alert( document.body['try-in-ie'] === 123 ) // true in IE<9

類型也是一樣的.屬性沒有變成一個字符串.

其次,在IE<8(或者IE8兼容IE7的模式)對象屬性和屬性一樣.會出現一些有趣的結果.

例如, 對象屬性名稱是大小寫區分的,而屬性名稱則不是. 如果瀏覽器認為他們是一樣的, 那下面的代碼結果會是什么樣?

document.body.abba = 1 // assign property (now can read it by getAttribute)document.body.ABBA = 5 // assign property with another case// must get a property named 'ABba' in case-insensitive way.alert( document.body.getAttribute('ABba') ) // ??

瀏覽器避開這些陷阱,則給他們設置一個默認值. 在IE中getAttribute方法提供了可選的第二個參數, 來決定是否大小寫區分. 可以看看MSDN getAttribute的詳細說明.

所有瀏覽器, 除了IE<9, "class"屬性改變class, 不要使用attribute. 同時使用className屬性

兼容IE, 正確的使用屬性.或者換句話說, 試著所有時候都使用對象屬性, 除非你真的需要一個屬性的時候.

需要屬性的時候:

1. 獲取一個自定義的屬性時, 因為DOM對象屬性中沒有同步這些屬性.

2. 獲取標準的HTML屬性的原始值,例如 .

屬性作為DOM節點

屬性節點同樣可以訪問,通過elem.attributes集合.

在 attributes 集合中, 每一個屬性通過一個特殊的DOM節點呈現. name, value和另外的對象屬性.

例如:

text

順便說說, IE<8 和 IE8 兼容模式下, 關于 "style"屬性是表現得不一樣. 猜猜是為什么?.

屬性DOM節點不是document數的一部分, 他們從他們的元素標簽中訪問.

總結

在DOM模式中,屬性和對象屬性都是核心的特點.

下面表格中表現了他們的關系和不同:

如果你想有自定義的屬性, 可以通過HTML5中有效的data-*屬性來完成. 不明白的可以看HTML5標準.

在實際當中, 98%例子中, DOM對象屬性被使用.

兩種情況下使用屬性:

1. 自定義的HTML屬性, 因為DOM對象屬性不同步.

2. 去訪問一個創建在HTML屬性中的, 沒有同步的DOM對象, 且確保你需要這個屬性. 比如 INPUT的value.

本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=226 ,歡迎大家傳播與分享.

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com