DOMのpropertiesとattributes

普段、propertiesとattributesの2つの単語がよく登場します.私はこの2つの言葉に対しても馬鹿で区別がつかず、普段は単純にこの2つの言葉を「属性」と理解しているだけです.しかし今日jQueryでは、prop()とattr()の2つの異なる方法が見られました.前の2つの言葉が私の頭の中で曖昧な定義を考慮して、私は私の探求の旅を始めました.
1.語義理解
ソフトウェア工学科の学生として、意外にも最初の文章がソフトウェア工学の角度からこの2つの語の違いを説明することであり、個人的にはこの文章の解釈に賛成している.以下は元の文章のブロガーの観点です.
ソフトウェアエンジニアリングの分野では、atrributeとpropertyという2つの言葉がよく見られ、中国語でも「属性」と訳されるが、この2つの言葉にはいったいどんな違いがあるのだろうか.個人的な意見は以下の通りです.
Propertyは、どのくらいのパラメータを持っているか、または物事が持っているパラメータを強調することに重点を置いており、特に物事を指す必要はなく、「ある」だけを強調しています.ソフトウェアエンジニアリングではpropertiesプロファイル、システム環境変数、システム構成パラメータなどがあります.
Attributeは、ある物事の固有の属性を強調したり、他の物事とは異なる特徴を強調したりして、「専」を強調します.マクロ的には、例えばCar類は、どんな色(Color)ですか.複数排出量(Displacement);どんなブランド(Brand)など、これらの特徴によって、どのような車なのかを区別することができます.
AttribueとPropertyは本義的に言えば、Attributeは属性、特徴に翻訳することができる.Propertyは属性、資産に翻訳できます.UMLでは、Propertyはマクロの属性記述や属性の統合に傾き、Attributeは特定のクラスの属性を指す.
2.DOMから見る
第1点を見て、この2つの言葉の定義が明らかになると信じています.今振り返って、両者のDOMの違いを見てみましょう.勉強した結果、私は以下の結論を得た.

propertyとattributeは2つの異なる概念であり、異なる範囲に属している.

propertyはDOMの属性であり、JavaScriptのオブジェクトである.

attributeはHTMLタグ上の特性であり、その値は文字列のみであることができる.

HTMLソースコードを作成する場合は、HTML要素に属性を定義できます.ブラウザがこのコードを解析すると、childElementCount、childNodes、children、classList、className、clientHeightなどの数十個の属性を含むHTML InputElementオブジェクトが作成されます.HTMLタグで定義した属性はattributesです.
コードを見てみましょう

  
   /* HTML */ 

  

  /* Javascript */

  var myInput = document.getElementById('myInput');
  console.log(myInput.type)        // "text"
  console.log(myInput.value)       // "default"
  console.log(myInput.id)          // "myInput"
  console.log(myInput.data)        // "undefined"
  console.dir(myInput.attributes)    //     NamedNodeMap  ，     type, value, id ,data     

上記のコードから、与えられたDOMノードオブジェクトに対してpropertiesはオブジェクトのプロパティであり、attributesはオブジェクトのattributesプロパティの要素であることがわかります.attributesはpropertyに属するサブセットで、HTMLラベルに定義された属性を保存します.さらにattitudesの各プロパティを探索すると、それらは単純なオブジェクトではなく、Attrタイプのオブジェクトであり、NodeType、NodeNameなどのプロパティを持っていることがわかります.もう1つ注意したいのは、attributeプロパティを印刷すると、オブジェクトの値は直接得られず、プロパティ名と値を含む文字列が取得されます.

  console.log(myInput.attributes.data);        // " data='mydata' "

また、指定したHTML要素にDOMノードを作成すると、そのノードの多くのpropertiesは、同じ名前または類似した名前を持つattributesに関連付けられますが、この関係は一対一の関係ではありません.例:

上の行のコードに対応するDOMノードはid,type,valueの3つの属性を持っています.

id属性ではpropertyはattributeのマッピング属性である.propertyを取得するとattributeが読み出され、propertyが設定されるとattributeが書き込まれます.idは純粋にマッピングされたpropertyプロパティであり、その値はアクティブに変更されず、制限されません.

typeプロパティでは、propertyはattributeのマッピングプロパティです.propertyを取得するとattributeが読み出され、propertyが設定されるとattributeが書き込まれます.しかしtypeは、既知の値(例えばinputの有効なtype)に限定されるため、純粋なマッピングの属性ではありません.例えば、コードを作成してtheInputを呼び出します.getAttribute(「type」)はデータを返し、結果は「foo」ではなく「text」を返します.

とは対照的に、valueプロパティではpropertyはattributeにマッピングされず、propertyはinputに入力された現在の値です.ユーザーが入力ボックスの値を手動で変更すると、valueのpropertyがこの変更をマッピングします.

コードを見てみましょう

  
   /* HTML */ 

   

  /* Javascript */

  var theInput = document.getElementById("the-input");
  console.log(theInput.value);     //  "Name:"
  
  // 1、       ”John“
  console.log(theInput.value);                     //  "John"
  console.log(theInput.getAttribute('value'));     //  "Name:"
  console.log(theInput.defaultValue);              //  "Name:"

  // 2、  attributes
  theInput.setAttribute('value','Tom');            //         "Tom"
  console.log(theInput.value);                     //  "Tom"  （ propertie      ）

  //3、  properties
  theInput.value = "Jack";                         //          "Jack"
  console.log(theInput.getAttribute('value'));     //  "Tom:"  （ attribute       ）

valueプロパティでは、propertyは入力ボックス内の現在のテキスト内容をマッピングし、attributeはHTMLソースコードのvalueプロパティの初期テキスト内容を含む.テキストボックスの内容を知りたい場合は、propertyプロパティにアクセスします.ただし、テキストボックスの初期値が何であるかを知りたい場合は、attributeプロパティにアクセスします.あるいはdefaultValueプロパティを使用することができます.これはvalueプロパティの最初のマッピングです.
一部のpropertiesは、rel、idなどのattributesを直接反映することができますが、htmlForマッピングforプロパティ、classNameマッピングclassプロパティなど、少し異なる名前で直接マッピングすることもあります.また、それらをマッピングできるプロパティもたくさんありますが、src、href、disabled、multipleなどの変更制限を受けています.
3.まとめ

propertyはDOMノードの属性であり、JavaScriptのオブジェクトである.

attributeはHTMLラベル上の特性であり、DOMノードのattributes属性として表現され、その値は文字列のみであることができる.

attributeとpropertyの間のデータバインドは一方向であり、attributeを変更するとpropertyが変更されます.

propertyとattributeの任意の値を変更すると、更新がHTMLページに反映されます.

4.参考資料

Properties and Attributes in HTML

DOMにおけるPropertyとAttributeの違い

AttributeとPropertyの違い