web-dev-qa-db-ja.com

HTMLのプロパティと属性の違いは何ですか？

JQuery 1.6.1で行われた変更の後、私はHTMLのプロパティと属性の違いを定義しようとしてきました。

jQuery 1.6.1リリースノート （一番下近く）のリストを見ると、HTMLのプロパティと属性を次のように分類できるようです。

  • プロパティ：ブール値を持つもの、またはselectedIndexなどのUAで計算されたもの。

  • 属性：ブール値でもUAで生成された値も含まないHTML要素に追加できる「属性」。

考えですか？

javascripthtmldomproperties
312
schalkneethling

HTMLソースコードを記述する場合、HTML要素にattributesを定義できます。次に、ブラウザがコードを解析すると、対応するDOMノードが作成されます。このノードはオブジェクトであるため、propertiesがあります。

たとえば、次のHTML要素：

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

2つの属性（typeおよびvalue）があります。

ブラウザーがこのコードを解析すると、 HTMLInputElement オブジェクトが作成され、このオブジェクトには、accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、childNodesのような多数のプロパティが含まれます。 、children、classList、className、clientHeightなど。

特定のDOMノードオブジェクトでは、プロパティはそのオブジェクトのプロパティであり、属性はそのオブジェクトのattributesプロパティの要素です。

特定のHTML要素に対してDOMノードが作成されると、そのプロパティの多くは同じまたは類似した名前の属性に関連付けられますが、1対1の関係ではありません。たとえば、このHTML要素の場合：

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

対応するDOMノードには、id、type、およびvalueのプロパティがあります（とりわけ）：

  • idプロパティは、id属性の反映プロパティです：プロパティを取得すると属性値が読み取られ、プロパティを設定すると属性値が書き込まれます。 idはpure反映されたプロパティであり、値を変更または制限しません。

  • typeプロパティは、type属性の反映プロパティです：プロパティを取得すると属性値が読み取られ、プロパティを設定すると属性値が書き込まれます。 typeは、既知の値（入力の有効なタイプなど）に制限されているため、純粋な反射プロパティではありません。 <input type="foo">がある場合、theInput.getAttribute("type")は"foo"を提供しますが、theInput.typeは"text"を提供します。

  • 対照的に、valueプロパティはvalue属性を反映しません。代わりに、入力の現在の値です。ユーザーが入力ボックスの値を手動で変更すると、valueプロパティにこの変更が反映されます。したがって、ユーザーが"John"を入力ボックスに入力すると、次のようになります。

    theInput.value // returns "John"

    一方：

    theInput.getAttribute('value') // returns "Name:"

    valueプロパティには、入力ボックス内のcurrentテキストコンテンツが反映されますが、value属性にはinitialHTMLソースコードのvalue属性のテキストコンテンツ。

    そのため、テキストボックス内の現在の内容を知りたい場合は、プロパティを読んでください。ただし、テキストボックスの初期値が何であるかを知りたい場合は、属性を読んでください。または、defaultValue属性を純粋に反映したvalueプロパティを使用できます。

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

属性を直接反映するプロパティ（rel、id）がいくつかありますが、一部はわずかに異なる名前の直接反映です（htmlForはfor属性、classNameはclass属性を反映しますが、多くはその属性を反映しますが、制限/変更（src、href、disabled、multiple）などがあります。に。 仕様 は、さまざまな種類の反射をカバーしています。

718
Šime Vidas

答えはすでに属性とプロパティがどのように異なって扱われるかを説明しています、しかし私は本当にどれほど完全に指摘したいです非常識これはこれです。ある程度仕様であっても。

DOMの中で1種類の値だけを保持するためにいくつかの属性（例えばid、class、foo、bar）を持つのはおかしいです（checked、selected]）2つの値を保持します。つまり、「ロードされたとき」の値と「動的状態」の値です。 （DOMはdocumentの状態を完全に表すためのものではないでしょうか？）

それは絶対に不可欠です、それは2つの入力フィールド、例えばa textと--- checkboxまったく同じように振る舞うテキスト入力フィールドに「ロードされたときの」値と「現在の動的な」値が別々に保持されていない場合、チェックボックスはなぜ必要ですか。チェックボックスのchecked属性に2つの値があるのに、classおよびid属性に2つの値がないのはなぜですか。もしあなたがtext * input *フィールドの値を変えることを期待していて、DOM（すなわち "直列化表現"）が変化することを期待し、そしてこの変化を反映するのであればchecked属性のinput型のフィールドcheckboxと同じ？

「それはブール値の属性である」という区別は、私には意味をなさない、または少なくともこれについて十分な理由ではありません。

40
sibidiba

Sime Vidas の答えを読んだ後、私はもっと検索し、 Angular docs の中で非常に簡単で分かりやすい説明を見つけました。

HTML属性とDOMプロパティ

属性はHTMLによって定義されます。プロパティはDOM（Document Object Model）で定義されています

  • いくつかのHTML属性は、プロパティへの1：1マッピングを持っています。 idがその一例です。

  • 一部のHTML属性には対応するプロパティがありません。 colspanがその一例です。

  • 一部のDOMプロパティには対応する属性がありません。 textContentがその一例です。

  • 多くのHTML属性はプロパティにマッピングされているように見えますが…あなたが思うような方法ではありません！

この最後のカテゴリは、この一般的な規則を理解するまでは混乱します。

属性はDOMプロパティを初期化してから実行されます。プロパティ値は変わる可能性があります。属性値はできません

たとえば、ブラウザが<input type="text" value="Bob">をレンダリングすると、 "Bob"に初期化されたvalueプロパティを持つ対応するDOMノードが作成されます。

ユーザーが入力ボックスに「Sally」と入力すると、DOM要素のvalueプロパティは「Sally」になります。しかし、HTMLのvalue属性は、その属性についてinput要素に問い合わせると、発見しても変わりません。input.getAttribute('value')は "Bob"を返します。

HTML属性valueは、初期値を指定します。 DOM valueプロパティは、現在の値です。

disabled属性は、もう1つの特殊な例です。ボタンのdisabledプロパティはデフォルトでfalseであるため、ボタンは有効になっています。 disabled属性を追加すると、その存在だけでボタンのdisabledプロパティがtrueに初期化されるため、ボタンは無効になります。

disabled属性を追加および削除すると、ボタンが無効になり有効になります。この属性の値は無関係です。そのため、<button disabled="false">Still Disabled</button>.を記述してボタンを有効にすることはできません。

ボタンのdisabledプロパティを設定すると、ボタンが無効または有効になります。 プロパティの値が重要です。

HTML属性とDOMプロパティは、同じ名前であっても同じものではありません。

10
subtleseeker

よくこれらは、属性とは何かプロパティとは何ですかw3cで指定されています http://www.w3.org/TR/SVGTiny12/attributeTable.html

しかし、現在attrとpropはそれほど違いはなく、ほとんど同じです。

しかし、彼らはいくつかのことのために小道具を好む

好ましい使用法のまとめ

.prop（）メソッドは、ブール値の属性/プロパティ、およびhtmlに存在しないプロパティ（window.locationなど）に使用する必要があります。他のすべての属性（htmlに表示されるもの）は、引き続き.attr（）メソッドで操作できます。

実際にはattrやprop、あるいはその両方を使用すれば何かを変更する必要はありませんが、私は自分のアプリケーションで、atrrが機能しないところでpropが機能することを確認しました

10
Daniel Ruf

HTMLのプロパティと属性の違い：

HTMLの違いが何であるかを評価する前に、まずこれらの単語の定義を見てみましょう。

英語の定義：

  • 属性は、オブジェクトの追加情報を参照しています。
  • プロパティは、オブジェクトの特性を説明しています。

HTMLの場合：

ブラウザはHTMLを解析すると、基本的にHTMLのメモリ内表現であるツリーデータ構造を作成します。ツリーデータ構造には、HTML要素とテキストであるノードが含まれています。これに関連する属性とプロパティは次のようになります。

  • 属性は初期化するためにHTMLに入れることができる追加情報ですDOMのプロパティ.
  • ブラウザがHTMLを解析してDOMを生成すると、プロパティが形成されます。 DOMの各要素には、ブラウザによってすべて設定される独自のプロパティセットがあります。これらのプロパティの中には、HTML属性によって初期値を設定できるものがあります。レンダリングされたページに影響を与えるDOMプロパティが変更されるたびに、ページはすぐに再レンダリングされます

これらのプロパティのマッピングが1対1ではないことを理解することも重要です。言い換えれば、HTML要素に与えるすべての属性が同じ名前のDOMプロパティを持つわけではありません。

さらに、異なるDOM要素には異なるプロパティがあります。たとえば、<input>要素には、<div>プロパティには存在しないvalueプロパティがあります。

例：

次のHTML文書を見てみましょう。

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

次に、JSコンソールで<div>を調べます。

 console.dir(document.getElementById('foo'));

次のDOMプロパティが表示されます（chrome devtools、表示されているすべてのプロパティではありません）。

html properties and attributes

  • HTMLの属性IDがDOMのIDプロパティにもなっていることがわかります。 idはHTMLによって初期化されています（ただし、javascriptを使って変更することもできます）。
  • HTMLのclass属性には対応するクラスプロパティがないことがわかります（classはJSでは予約語です）。しかし実際には2つのプロパティ、classListとclassNameがあります。
2
Willem van der Veen