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