資訊專欄INFORMATION COLUMN
摘要：前端雜談第一個(gè)問題什么是什么是是我們?cè)诖a中經(jīng)?？吹降逆I值對(duì)例如上面代碼中的節(jié)點(diǎn)有三個(gè)是對(duì)應(yīng)的節(jié)點(diǎn)的對(duì)象屬性例如第二個(gè)問題從上面的例子來看似乎和是相同的那么他們有什么區(qū)別呢讓我們來看另一段代碼在頁面加載后我們?cè)谶@個(gè)中輸入注意這段代碼
前端雜談: Attribute VS Property 第一個(gè)問題: 什么是 attribute & 什么是 property ?
attribute 是我們?cè)?html 代碼中經(jīng)常看到的鍵值對(duì), 例如:
上面代碼中的 input 節(jié)點(diǎn)有三個(gè) attribute:
id : the-input
type : text
value : Name:
property 是 attribute 對(duì)應(yīng)的 DOM 節(jié)點(diǎn)的 對(duì)象屬性 (Object field), 例如:
HTMLInputElement.id === "the-input" HTMLInputElement.type === "text" HTMLInputElement.value === "Name:"第二個(gè)問題:
從上面的例子來看, 似乎 attribute 和 property 是相同的, 那么他們有什么區(qū)別呢?
讓我們來看另一段代碼:
// 在頁面加載后, 我們?cè)谶@個(gè)input中輸入 "Jack"
注意這段代碼中的 type 屬性, 我們給的值是 typo, 這并不屬于 input 支持的 type 種類.
讓我們來看看上面這個(gè) input 節(jié)點(diǎn)的 attribute 和 property:
// attribute still remains the original value
input.getAttribute("id") // the-input
input.getAttribute("type") // typo
input.getAttribute("value") // Name:
// property is a different story
input.id // the-input
input.type // text
input.value // Jack
可以看到, 在 attribute 中, 值仍然是 html 代碼中的值. 而在 property 中, type 被自動(dòng)修正為了 text, 而 value 隨著用戶改變 input 的輸入, 也變更為了 Jack
這就是 attribute 和 Property 間的區(qū)別:
attribute 會(huì)始終保持 html 代碼中的初始值, 而 Property 是有可能變化的.
其實(shí), 我們從這兩個(gè)單詞的名稱也能看出些端倪:
attribute 從語義上, 更傾向于不可變更的
而 property 從語義上更傾向于在其生命周期中是可變的
Attribute or Property 可以自定義嗎?先說結(jié)論: attribute 可以 property 不行
我們可以嘗試在 html 中自定義 attribute:
然后我們嘗試獲取自定義的屬性:
input.getAttribute("customAttr") // custome attribute value
input.customAttr // undefined
可以看到, 我們能夠成功的獲取自定義的 attribute, 但是無法獲取 property.
其實(shí)不難理解, DOM 節(jié)點(diǎn)在初始化的時(shí)候會(huì)將html 規(guī)范中定義的 attribute 賦值到 property 上, 而自定義的 attribute 并不屬于這個(gè)氛圍內(nèi), 自然生成的 DOM 節(jié)點(diǎn)就沒有這個(gè) property.
一些補(bǔ)充需要注意, 有一些特殊的 attribute, 它們對(duì)應(yīng)的 Property 名稱會(huì)發(fā)生改變, 比如:
for (attr) => htmlFor (prop)
class (attr) => className (prop)
(如果我們追到 DOM 的源碼中, 應(yīng)該是能列出一份清單的: 哪些 attribute 的名稱會(huì)對(duì)應(yīng)到哪些 Property, 感興趣不妨試試)
關(guān)于 attribute 和 property 兩者之間的差別, stackoverflow 上有一些很有意思的討論:
https://stackoverflow.com/a/6...
其中有些人認(rèn)為 attribute 的值表示的是 defaultValue, 而 DOM 節(jié)點(diǎn)的 Property 則是另一回事. 比如: check (attr) 對(duì)應(yīng)的是 defaultChecked (prop), value(attr) 對(duì)應(yīng)的應(yīng)該是 defaultValue (prop)
關(guān)于我們?cè)?attribute 中 value 的限制 (如 input 的 type 有那些有效值), 可以參考這個(gè)鏈接:
https://www.w3.org/TR/html5/i...
想了解更多 D3.js 和 數(shù)據(jù)可視化 ?這里是我的 D3.js 、 數(shù)據(jù)可視化 的 github 地址, 歡迎 star & fork
D3-blog
如果覺得本文不錯(cuò)的話, 不妨點(diǎn)擊下面的鏈接關(guān)注一下 : )github 主頁
知乎專欄
掘金
想直接聯(lián)系我 ?微信:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53255.html
摘要：可以是字符串，布爾值得，對(duì)象，數(shù)字等。但是這樣的后果是，這些元素也不是合法的文檔了。 1: 獲取網(wǎng)頁元素的屬性值 HTML里面的標(biāo)簽，都有一些屬性（attribute），比方： 這里的href, id和class都是這個(gè)元素的attribute。而在我們的HTMLElement里，定義了與之對(duì)應(yīng)的屬性(property)，通過引用它們，可以得到這些元素的attribute的價(jià)值，例如...
摘要：最近，一個(gè)小伙伴問了我一個(gè)問題和的區(qū)別當(dāng)時(shí)我想了又想，很不好意思的說了我不知道，所以，抽了個(gè)事件好好的利用了一下度娘和總結(jié)了一下。 最近，一個(gè)小伙伴問了我一個(gè)問題property和attribute的區(qū)別？當(dāng)時(shí)我想了又想，很不好意思的說了我不知道，所以，抽了個(gè)事件好好的利用了一下‘度娘’和‘Google’總結(jié)了一下。度娘搜索到的有用信息知乎中的討論csdn搜索的結(jié)果，Google發(fā)現(xiàn)的...
摘要：先提出問題對(duì)于這類值是的屬性，用的或方法進(jìn)行讀取或設(shè)置值是有區(qū)別的。因此，如果你想知道文本框的當(dāng)前值，則讀取。的值并不會(huì)隨著的狀態(tài)而作出相應(yīng)改變，而會(huì)。為對(duì)象設(shè)置值的安全做法避免內(nèi)存泄漏是使用。參考翻譯地址的與的區(qū)別 先提出問題：對(duì)于 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進(jìn)行 讀取或設(shè)置值是有區(qū)別的。 在看 jQue...
摘要：在大多數(shù)的文章中，一般被翻譯為特性，被譯為屬性。但是，和并不總是一對(duì)一的關(guān)系。當(dāng)修改特性時(shí)，屬性也會(huì)更新但是修改屬性后，特性卻還是原值。修改特性屬性也更新了修改屬性特性沒有更新非標(biāo)準(zhǔn)特性非標(biāo)準(zhǔn)特性并不會(huì)自動(dòng)映射為屬性。 在大多數(shù)的文章中，attribute 一般被翻譯為特性，property 被譯為屬性。 結(jié)論 把結(jié)論寫在最前面，如果你全都懂，后面就不用看了。 HTML attri...
閱讀 5128·2021-07-25 21:37
閱讀 708·2019-08-30 15:53
閱讀 3377·2019-08-29 18:47
閱讀 711·2019-08-29 15:39
閱讀 2162·2019-08-29 13:12
閱讀 1832·2019-08-29 12:43
閱讀 3021·2019-08-26 11:52
閱讀 1913·2019-08-26 10:15
