【譯】詳解HTML中property和attribute的區別

翻看Vue API文檔時發現v-bind有一個修飾符.prop比較特殊:

.prop - 作爲一個 DOM property 綁定而不是作爲 attribute 綁定。

文檔還給了一個stack overflow上的問題差別在哪裏?來解釋,感覺高票答案通俗易懂,遂翻譯一波。

譯文

當編寫一段HTML代碼的時候,你可以在HTML標籤上面定義attribute,當瀏覽器編譯完HTML代碼,會生成與之對應的一個個DOM節點,每個DOM節點是一個對象,所以它擁有很多property。例如以下代碼:

<input type="text" value="Name:">

input標籤有兩個attribute,即typevalue。當瀏覽器編譯完這段代碼,一個HTMLInputElement對象會被創建,這個對象包含一系列的property,例如accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight等。

對於一個DOM節點對象,property就是這個對象上的屬性;attribute是該對象對應的HTML標籤元素上的屬性。

當一個HTML標籤元素解析成一個DOM節點對象時,這個節點對象上有很多property屬性名和HTML標籤元素上的attribute相同或相似,但不一定是一一映射關係。比如:

<input id="the-input" type="text" value="Name:">

對於上述HTML標籤,其對應的DOM節點對象的property包括idtypevalue(當然還有別的):

  1. id
    DOM節點對象上的id屬性(property)和HTML標籤上的id屬性(attribute)是映射關係。當讀取DOM節點對象的id屬性值時就是讀取HTML標籤上的id屬性值,當給DOM節點對象的id屬性寫入值時就是往HTML標籤上的id屬性寫入值。id是一個純映射屬性,映射過程中不會產生副作用,比如修改或者限制其值。

  2. type
    id屬性一樣,DOM節點對象上的type屬性(property)和HTML標籤上的type屬性(attribute)是映射關係。當讀取DOM節點對象的id屬性值時就是讀取HTML標籤上的id屬性值,當給DOM節點對象的id屬性寫入值時就是往HTML標籤上的id屬性寫入值。但是type屬性不是一個純映射屬性,因爲在映射過程中,它的值會被限制在已知類型中,比如input支持的有效type類型。舉個例子,對於<input type="foo">這樣一個HTML標籤, Input.getAttribute('type')的返回值是foo,而Input.type的返回值爲text

  3. value
    與上面兩個屬性相反,DOM節點對象上的value屬性(property)和HTML標籤上的value屬性(attribute)不存在映射關係,它就是當前input輸入框的值。當用戶改變輸入框中的值,DOM對象上的value屬性會跟着變化。假如用戶在輸入框中輸入'John',那麼Input.value的返回值是John,而Input.getAttribute('value')的返回值是Name:

從上面可以看出,DOM節點對象上的value屬性(property)是當前輸入框內容的映射,而HTML標籤上的value屬性(attribute)是HTML標籤元素上初始設置的值(或者代碼設置)。

如果你需要知道當前輸入框的內容,就直接讀取DOM節點對象的value屬性(property);如果你想知道輸入框的初始值是什麼,就直接讀取HTML標籤元素的value屬性(attribute),或者使用DOM節點對象的defaultValue屬性,它與HTML標籤上的value屬性(attribute)是純映射關係:

Input.value                 // returns "John"
Input.getAttribute('value') // returns "Name:"
Input.defaultValue          // returns "Name:"

有些DOM節點對象上的property屬性與HTML標籤上的attribute屬性一一映射(名字一樣),比如relid;有些名字稍微有些變化,比如DOM節點對象htmlFor屬性對應HTML標籤上的for屬性,DOM節點對象className屬性對應HTML標籤上的class屬性;更多的是兩者雖然有映射關係,但是存在副作用,會限制或者修改屬性值,比如srchrefdisabledmultiple等。

原文

What is the difference between properties and attributes in HTML

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章