[譯]HTML attribute與DOM property之間的區別？

wmui 發布于2019-08-01 16:32 / 1255人閱讀

摘要：，還有三者都返回相同的。這篇文章我將解釋和的區別。特性特性由定義，所有出現在標簽內的描述節點都是特性。屬性屬性屬于對象，實質就是中的對象。尤其是有些類型本該是布爾類型的特性。瀏覽器會自動將這些值轉變成布爾值傳給屬性。

原文：http://joji.me/en-us/blog/htm...

當我們通過js處理DOM對象時非常容易將attribute（特性）和property（屬性）混淆。document.getElementById("test").getAttribute("id")，$("#test").attr("id"), document.getElementById("test").id還有$("#test").prop("id")三者都返回相同的id：“test”。這篇文章我將解釋attribute和property的區別。

Attribute（特性）

attribute特性由HTML定義，所有出現在HTML標簽內的描述節點都是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實質就是javascript中的對象。我們可以跟在js中操作普通對象一樣獲取、設置DOM對象的屬性，并且property屬性可以是任意類型。

document.getElementById("test").foo = 1; // 設置屬性: 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設置一個名為foo的對象
document.getElementById("test").foo.age; // return number類型: 23
document.getElementById("test").foo.name; // return string類型: "John"

譯者注：這里的property可以是任意類型指的是我們為DOM對象自定義添加的屬性，對于DOM對象的原始屬性，類似name屬性，無論我們設置什么類型的值，最后返回的都是字符類型。

另外，我們獲取HTML5定義的data屬性時，獲取的值也是字符串。

,ele.dataset.id // string 33

非自定義的attribute特性與property有1:1的映射關系，比如：id，class，title等。

document.getElementById("test").id; // return string: "test"
document.getElementById("test").className; // return string: "button"
document.getElementById("test").foo; // return undefined 因為foo是一個自定義的attr特性

注意：當我們通過property屬性進行設置或獲取class時，我們需要使用"className"，因為在js中class是關鍵字。

譯者注：第二點的意思是說當我們在html中寫非自定義的attribute特性時，DOM對象會自動映射對應的property

非自定義的property（attribute）改變的時候，其對應的attribute（property）在多數情況下也會改變。

    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"

當對應的property改變的時候，attribute特性value的值一直未默認值，并不會隨之改變。

var input = document.getElementById("search");
input.value = "foo2";
input.getAttribute("value"); // return string: "foo"

譯者注：這條特性意味著我們平時在寫業務的時候多數情況下使用property是正確的。當用戶input輸入更改的時候，attribute-value值不會變化，即使js更改value，也不會使attribute變化。這也驗證了第三點的。

最佳實踐

在javascript中我們推薦使用property屬性因為這個屬性相對attribute更快，更簡便。尤其是有些類型本該是布爾類型的attribute特性。比如："checked", "disabled", "selected"。瀏覽器會自動將這些值轉變成布爾值傳給property屬性。

好實踐

// 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);

壞實踐

// get id
document.getElementById("test").getAttribute("id");
// set class
document.getElementById("test").setAttribute("class", "red");
document.getElementById("test").getAttribute("checked"); //  返回字符串類型 "checked"

本文來自二口南洋，有什么需要討論的歡迎找我。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50583.html

jQuery 的 attr 與 prop 的區別

摘要：先提出問題對于這類值是的屬性，用的或方法進行讀取或設置值是有區別的。因此，如果你想知道文本框的當前值，則讀取。的值并不會隨著的狀態而作出相應改變，而會。為對象設置值的安全做法避免內存泄漏是使用。參考翻譯地址的與的區別先提出問題：對于 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進行讀取或設置值是有區別的。在看 jQue...

kk_miles 2019-08-19 17:47 評論0 收藏0
前端中的 Attribute & Property

摘要：在使用上面，已經表明態度模板綁定是通過和事件來工作的，而不是。更改的值，相當于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應中提供的三個操作的方法。為了在翻譯上顯示出區別，Attribute一般被翻譯為特性，Property被譯為屬性。在使用上面，Angular已經表明態度 Template binding works with properties and even...

fou7 2019-08-01 18:22 評論0 收藏0
前端中的 Attribute & Property

摘要：在使用上面，已經表明態度模板綁定是通過和事件來工作的，而不是。更改的值，相當于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應中提供的三個操作的方法。為了在翻譯上顯示出區別，Attribute一般被翻譯為特性，Property被譯為屬性。在使用上面，Angular已經表明態度 Template binding works with properties and even...

wall2flower 2019-08-21 18:41 評論0 收藏0
前端雜談: Attribute VS Property

摘要：前端雜談第一個問題什么是什么是是我們在代碼中經常看到的鍵值對例如上面代碼中的節點有三個是對應的節點的對象屬性例如第二個問題從上面的例子來看似乎和是相同的那么他們有什么區別呢讓我們來看另一段代碼在頁面加載后我們在這個中輸入注意這段代碼前端雜談: Attribute VS Property 第一個問題: 什么是 attribute & 什么是 property ? attribute 是...

elina 2019-08-02 11:59 評論0 收藏0
jQuery中attr()和prop()的區別

摘要：需求很簡單的，一個非常簡單的復選框的使用。與的區別復選框設置設置自定義自定義設置類型設置類型支持類型在這里溫馨提示提示一下，當我們設置這個屬性時，再用獲取的時候，控制提示。問題引入昨天接到了一個活，里面有一個小需求，在寫的過程中遇到了一個小問題。雖然這個問題并不是很復雜的東西，但卻是一個比較細節的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。 showImg(...

mo0n1andin 2019-08-20 15:38 評論0 收藏0