資訊專欄INFORMATION COLUMN
摘要：在使用上面，已經(jīng)表明態(tài)度模板綁定是通過和事件來工作的，而不是。更改的值，相當于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應(yīng)中提供的三個操作的方法。
為了在翻譯上顯示出區(qū)別，Attribute一般被翻譯為特性，Property被譯為屬性。
在使用上面，Angular已經(jīng)表明態(tài)度
Template binding works with properties and events, not attributes.
模板綁定是通過 property 和事件來工作的，而不是 attribute。
jQuery中的prop()和attr()如何選擇，眾說紛紜...
兩種主流觀點：
對于一些公認的attribute和property，使用setAttribute(),理由是property會出現(xiàn)class映射過去為className，名稱不統(tǒng)一的問題。
紅寶書作者推薦操作DOM property，因為在瀏覽器上面表現(xiàn)的比較一致。
HTML attribute & DOM property 關(guān)系與區(qū)別引用Angular文檔中的一段話去概括兩者的關(guān)系和區(qū)別：
HTML attribute 與 DOM property 的對比
attribute 是由 HTML 定義的。property 是由 DOM (Document Object Model) 定義的。
少量 HTML attribute 和 property 之間有著 1:1 的映射，如id。
有些 HTML attribute 沒有對應(yīng)的 property，如colspan。
有些 DOM property 沒有對應(yīng)的 attribute，如textContent。
普遍原則：
HTML attribute 初始化 DOM property，然后它們的任務(wù)就完成了。
更改 attribute 的值，相當于再次初始化DOM property 。
更改 property 的值，property值改變，attribute值不變。
幾個有代表性的映射表
| HTML attribute | DOM property |
|---|---|
| id | id |
| class | className |
| checked = "checked" | checked 值為true |
為什么說是普遍原則呢？在低版本的ie中，操作DOM property中的value，attribute中的value也發(fā)生了改變。完全不講道理 - -
更改HTML attribute
myInput.setAttribute("value", "test Attr");
| 瀏覽器 | myInput.getAttribute("value") | myInput.value |
|---|---|---|
| chrome ie11 ff | test Attr | test Attr |
| ie8 | test Attr | test Attr |
更改DOM property
document.getElementById("myInput").value = "test property";
| 瀏覽器 | myInput.getAttribute("value") | myInput.value |
|---|---|---|
| chrome ie11 ff | 123 | test property |
| ie8 | test property (普遍原則下應(yīng)該為123) | test property |
prop()采用的是更改DOM property的方式，基本上對應(yīng)更改DOM屬性。
| 原生DOM | jQuery | 操作 |
|---|---|---|
| element.value | $element.prop( name[,value]) | 讀寫 |
| delete element.propertyName | $element.removeProp( propertyName ) | 刪除 |
attr() 采用的是更改HTML attribute的方式，基本上對應(yīng)DOM中提供的三個操作attribute的方法。
| 原生DOM | jQuery | 操作 |
|---|---|---|
| element.getAttribute(name) | $element.attr(name) | 讀 |
| element.setAttribute(name,value) | $element.attr(name ,value) | 寫 |
| delete element.removeAttribute(name) | $element.removeAttr( name ) | 刪除 |
獲取一些標簽上面的的自定義屬性，或者一些基本不會改變的特性的時候，多數(shù)情況下用attr()（data-*等除外）。
$("form").attr("user-my-name"); // nilinli
$("form").attr("action"); // test.php
其他情況下，操作DOM與頁面交互，一般情況下用prop()
總的來說，盡量操作DOM property，只有在沒有DOM property(自定義attribute或者沒有相關(guān)映射)，才去操作HTML attribute。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90712.html
摘要：在使用上面，已經(jīng)表明態(tài)度模板綁定是通過和事件來工作的，而不是。更改的值，相當于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應(yīng)中提供的三個操作的方法。 為了在翻譯上顯示出區(qū)別，Attribute一般被翻譯為特性，Property被譯為屬性。 在使用上面，Angular已經(jīng)表明態(tài)度 Template binding works with properties and even...
摘要：前端雜談第一個問題什么是什么是是我們在代碼中經(jīng)?？吹降逆I值對例如上面代碼中的節(jié)點有三個是對應(yīng)的節(jié)點的對象屬性例如第二個問題從上面的例子來看似乎和是相同的那么他們有什么區(qū)別呢讓我們來看另一段代碼在頁面加載后我們在這個中輸入注意這段代碼 前端雜談: Attribute VS Property 第一個問題: 什么是 attribute & 什么是 property ? attribute 是...
摘要：需求很簡單的，一個非常簡單的復(fù)選框的使用。與的區(qū)別復(fù)選框設(shè)置設(shè)置自定義自定義設(shè)置類型設(shè)置類型支持類型在這里溫馨提示提示一下，當我們設(shè)置這個屬性時，再用獲取的時候，控制提示。 問題引入 昨天接到了一個活，里面有一個小需求，在寫的過程中遇到了一個小問題。雖然這個問題并不是很復(fù)雜的東西，但卻是一個比較細節(jié)的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。 showImg(...
摘要：最近，一個小伙伴問了我一個問題和的區(qū)別當時我想了又想，很不好意思的說了我不知道，所以，抽了個事件好好的利用了一下度娘和總結(jié)了一下。 最近，一個小伙伴問了我一個問題property和attribute的區(qū)別？當時我想了又想，很不好意思的說了我不知道，所以，抽了個事件好好的利用了一下‘度娘’和‘Google’總結(jié)了一下。度娘搜索到的有用信息知乎中的討論csdn搜索的結(jié)果，Google發(fā)現(xiàn)的...
我們時常會想在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎(chǔ)上，這些功能如何優(yōu)化的實現(xiàn)？ 以Element Plus的el-input為例： 在封裝一個MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來編寫： //MyInput.vue <template&...
閱讀 1936·2021-11-22 15:25
閱讀 1300·2021-11-19 09:40
閱讀 1938·2021-09-27 13:57
閱讀 1049·2021-09-22 15:10
閱讀 1023·2021-08-16 11:01
閱讀 3020·2021-07-23 17:51
閱讀 808·2019-08-30 15:55
閱讀 877·2019-08-30 13:58
