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