資訊專欄INFORMATION COLUMN
摘要：，還有三者都返回相同的。這篇文章我將解釋和的區(qū)別。特性特性由定義，所有出現(xiàn)在標(biāo)簽內(nèi)的描述節(jié)點(diǎn)都是特性。屬性屬性屬于對象，實(shí)質(zhì)就是中的對象。尤其是有些類型本該是布爾類型的特性。瀏覽器會自動將這些值轉(zhuǎn)變成布爾值傳給屬性。
原文：http://joji.me/en-us/blog/htm...
當(dāng)我們通過js處理DOM對象時非常容易將attribute（特性）和property（屬性）混淆。document.getElementById("test").getAttribute("id")，$("#test").attr("id"), document.getElementById("test").id還有$("#test").prop("id")三者都返回相同的id：“test”。這篇文章我將解釋attribute和property的區(qū)別。
Attribute（特性）
attribute特性由HTML定義，所有出現(xiàn)在HTML標(biāo)簽內(nèi)的描述節(jié)點(diǎn)都是attribute特性。
document.getElementById("test").attributes;
// return: [custom-attr="hello", class="button", id="test"]
attribute特性的類型總是字符串類型。拿上邊的DIV為例，document.getElementById("test").getAttribute("custom-attr") 或者 $("#test").attr("custom-attr")總是返回字符串類型的"1"。
Property（屬性）
property屬性屬于DOM對象，DOM實(shí)質(zhì)就是javascript中的對象。我們可以跟在js中操作普通對象一樣獲取、設(shè)置DOM對象的屬性，并且property屬性可以是任意類型。
document.getElementById("test").foo = 1; // 設(shè)置屬性: foo 為 number類型: 1
document.getElementById("test").foo; // 獲取屬性值, return number: 1
$("#test").prop("foo"); // 使用jquery獲取屬性值, return number: 1
$("#test").prop("foo", {
age: 23,
name: "John"
}); // 使用jquery設(shè)置一個名為foo的對象
document.getElementById("test").foo.age; // return number類型: 23
document.getElementById("test").foo.name; // return string類型: "John"
譯者注：這里的property可以是任意類型指的是我們?yōu)镈OM對象自定義添加的屬性，對于DOM對象的原始屬性，類似name屬性，無論我們設(shè)置什么類型的值，最后返回的都是字符類型。
另外，我們獲取HTML5定義的data屬性時，獲取的值也是字符串。,ele.dataset.id // string 33
非自定義的attribute特性與property有1:1的映射關(guān)系，比如：id，class，title等。
document.getElementById("test").id; // return string: "test"
document.getElementById("test").className; // return string: "button"
document.getElementById("test").foo; // return undefined 因?yàn)閒oo是一個自定義的attr特性
注意：當(dāng)我們通過property屬性進(jìn)行設(shè)置或獲取class時，我們需要使用"className"，因?yàn)樵趈s中class是關(guān)鍵字。
譯者注：第二點(diǎn)的意思是說當(dāng)我們在html中寫非自定義的attribute特性時，DOM對象會自動映射對應(yīng)的property
非自定義的property（attribute）改變的時候，其對應(yīng)的attribute（property）在多數(shù)情況下也會改變。
var div = document.getElementById("test");
div.className = "red-input";
div.getAttribute("class"); // return string: "red-input"
div.setAttribute("class","green-input");
div.className; // return string: "green-input"
當(dāng)對應(yīng)的property改變的時候，attribute特性value的值一直未默認(rèn)值，并不會隨之改變。
var input = document.getElementById("search");
input.value = "foo2";
input.getAttribute("value"); // return string: "foo"
譯者注：這條特性意味著我們平時在寫業(yè)務(wù)的時候多數(shù)情況下使用property是正確的。當(dāng)用戶input輸入更改的時候，attribute-value值不會變化，即使js更改value，也不會使attribute變化。這也驗(yàn)證了第三點(diǎn)的。
最佳實(shí)踐
在javascript中我們推薦使用property屬性因?yàn)檫@個屬性相對attribute更快，更簡便。尤其是有些類型本該是布爾類型的attribute特性。比如："checked", "disabled", "selected"。瀏覽器會自動將這些值轉(zhuǎn)變成布爾值傳給property屬性。
好實(shí)踐
// get id
document.getElementById("test").id;
// set class
document.getElementById("test").className = "red";
// get and set radio control status
document.getElementById("test").checked; // boolean
document.getElementById("test").checked = true;
$("#test").prop("checked"); // boolean
$("#test").prop("checked", true);
壞實(shí)踐
// get id
document.getElementById("test").getAttribute("id");
// set class
document.getElementById("test").setAttribute("class", "red");
document.getElementById("test").getAttribute("checked"); // 返回字符串類型 "checked"
本文來自二口南洋，有什么需要討論的歡迎找我。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/50583.html
摘要：先提出問題對于這類值是的屬性，用的或方法進(jìn)行讀取或設(shè)置值是有區(qū)別的。因此，如果你想知道文本框的當(dāng)前值，則讀取。的值并不會隨著的狀態(tài)而作出相應(yīng)改變，而會。為對象設(shè)置值的安全做法避免內(nèi)存泄漏是使用。參考翻譯地址的與的區(qū)別 先提出問題：對于 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進(jìn)行 讀取或設(shè)置值是有區(qū)別的。 在看 jQue...
摘要：在使用上面，已經(jīng)表明態(tài)度模板綁定是通過和事件來工作的，而不是。更改的值，相當(dāng)于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應(yīng)中提供的三個操作的方法。 為了在翻譯上顯示出區(qū)別，Attribute一般被翻譯為特性，Property被譯為屬性。 在使用上面，Angular已經(jīng)表明態(tài)度 Template binding works with properties and even...
摘要：在使用上面，已經(jīng)表明態(tài)度模板綁定是通過和事件來工作的，而不是。更改的值，相當(dāng)于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應(yīng)中提供的三個操作的方法。 為了在翻譯上顯示出區(qū)別，Attribute一般被翻譯為特性，Property被譯為屬性。 在使用上面，Angular已經(jīng)表明態(tài)度 Template binding works with properties and even...
摘要：前端雜談第一個問題什么是什么是是我們在代碼中經(jīng)?？吹降逆I值對例如上面代碼中的節(jié)點(diǎn)有三個是對應(yīng)的節(jié)點(diǎn)的對象屬性例如第二個問題從上面的例子來看似乎和是相同的那么他們有什么區(qū)別呢讓我們來看另一段代碼在頁面加載后我們在這個中輸入注意這段代碼 前端雜談: Attribute VS Property 第一個問題: 什么是 attribute & 什么是 property ? attribute 是...
摘要：需求很簡單的，一個非常簡單的復(fù)選框的使用。與的區(qū)別復(fù)選框設(shè)置設(shè)置自定義自定義設(shè)置類型設(shè)置類型支持類型在這里溫馨提示提示一下，當(dāng)我們設(shè)置這個屬性時，再用獲取的時候，控制提示。 問題引入 昨天接到了一個活，里面有一個小需求，在寫的過程中遇到了一個小問題。雖然這個問題并不是很復(fù)雜的東西，但卻是一個比較細(xì)節(jié)的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。 showImg(...
閱讀 792·2021-11-22 13:52
閱讀 1595·2021-09-27 13:36
閱讀 2912·2021-09-24 09:47
閱讀 2295·2021-09-22 15:48
閱讀 3658·2021-09-22 15:39
閱讀 1528·2019-08-30 12:43
閱讀 2980·2019-08-29 18:39
閱讀 3267·2019-08-29 12:51
