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

436
schalkneethling 2011-05-15 08:04.

jQuery 1.6.1で変更を加えた後、HTMLのプロパティと属性の違いを定義しようとしています。

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

  • プロパティ:ブール値を持つか、selectedIndexなどのUAで計算されるすべて。

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

考え?

5 answers

885
Šime Vidas 2011-05-15 08:38.

HTMLソースコードを作成するときに、HTML要素に属性を定義できます。次に、ブラウザがコードを解析すると、対応するDOMノードが作成されます。このノードはオブジェクトであるため、プロパティがあります

たとえば、次の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ノードが有するであろうidtype及びvalue(とりわけ)特性:

  • idプロパティがあり、反射プロパティのためのid属性:プロパティを取得する属性値を読み出し、そのプロパティを設定すると、属性値を書き込みます。id純粋に反映されたプロパティであり、値を変更または制限することはありません。

  • 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プロパティには反映され、現在のに対し、入力ボックス内のテキスト・コンテンツをvalue属性が含まれている初期のテキストコンテンツvalueのHTMLソースコードから属性を。

    したがって、現在テキストボックス内にあるものを知りたい場合は、プロパティをお読みください。ただし、テキストボックスの初期値を知りたい場合は、属性を読んでください。またはdefaultValuevalue属性を純粋に反映したプロパティを使用することもできます。

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

そこに直接自分の属性を反映するいくつかのプロパティは(あるrelid)、いくつかは少し-異なる名前との直接反射である(htmlFor反映for属性をclassName反映したclass属性)を、多くの人が自分の属性を反映していることが、制限/修正を加えた(srchrefdisabledmultipleそう)、およびオン。仕様は、さまざまな種類の反射をカバーしています。

66
subtleseeker 2018-12-26 07:35.

Sime Vidasの回答を読んだ後、さらに検索して、Angularドキュメントで非常にわかりやすく理解しやすい説明を見つけました。

HTML属性とDOMプロパティ

-------------------------------

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

  • いくつかのHTML属性には、プロパティへの1:1マッピングがあります。id一例です。

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

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

  • 多くのHTML属性がプロパティにマップされているように見えますが、思ったとおりではありません。

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

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

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

ユーザーが入力ボックスに「Sally」と入力すると、DOM要素のvalue プロパティは「Sally」になります。ただし、入力要素にその属性について尋ねると、HTMLvalue 属性は変更されませんinput.getAttribute('value')。「Bob」を返します。

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


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

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

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

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

46
sibidiba 2011-06-17 09:58.

答えはすでに属性とプロパティがどのように異なって扱われるかを説明していますが、これがどれほど完全に狂っているのかを本当に指摘したいと思います。ある程度スペックだとしても。

一部の属性(id、class、foo、barなど)がDOMに1種類の値のみを保持し、一部の属性(checked、selectedなど)が2つの値を保持するのはおかしいです。つまり、「ロードされたとき」の値と「動的状態」の値です。(DOMは、ドキュメントの状態を完全に表すことになっているのではありませんか?)

それはことを、絶対に不可欠である二つの入力フィールド、例えばテキストチェックボックスの 非常に同じように振る舞います。テキスト入力フィールドに「ロード時」の値と「現在の動的」の値が別々に保持されていない場合、チェックボックスが表示されるのはなぜですか。チェックボックスが2つの値持っていない場合はチェックした属性を、なぜそれがそのために2つ持っていないクラスID属性を?テキストの*入力*フィールドの値を変更する予定であり、DOM(つまり、「シリアル化された表現」)が変更され、この変更を反映することが予想される場合、いったいなぜ、の入力フィールドから同じことを期待しないのでしょうか。チェックされた属性のチェックボックスを入力しますか?

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

10
Daniel Ruf 2011-05-15 08:27.

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

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

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

推奨される使用法の要約

.prop()メソッドは、ブール属性/プロパティおよびhtmlに存在しないプロパティ(window.locationなど)に使用する必要があります。他のすべての属性(htmlで確認できる属性)は、.attr()メソッドで操作できます。

実際には、attrまたはprop、あるいはその両方を使用する場合は、何かを変更する必要はありません。両方とも機能しますが、自分のアプリケーションで、atrrが機能しなかった場所でpropが機能することを確認したので、1.6アプリのpropを使用しました=)

6
Willem van der Veen 2018-11-29 01:41.

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

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

英語の定義:

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

HTMLコンテキストの場合:

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

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

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

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

例:

次の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>

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

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

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

  • HTMLの属性IDがDOMのidプロパティでもあることがわかります。IDはHTMLによって初期化されています(ただし、javascriptで変更できます)。
  • HTMLのclass属性には、対応するclassプロパティがないことがわかります(classJSではreservedキーワードです)。しかし、実際には2つのプロパティ、classListおよびclassName

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

BAE Systems Maritimeは昨日、英国海軍の2番目のクイーンエリザベスクラスの空母であるHMSプリンスオブウェールズのブリッジモジュールを展開しました。公海を航海するよりも、アウターリムの惑星を周回してタイファイターを発射する必要があるようです。70,000の排水量のトン運搬船は、2020年に就役し、姉のエリザベス女王と同様に、約40機の航空機を運ぶ予定です。

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルは、通常の大学野球の強みであるピッチング、ディフェンス、スマートベースランニングを通じて、全国ランキングのトップ5と19-2の会議記録への道を歩みました。昨夜、彼らは野球の最もエキサイティングなプレーの1つである盗塁を使用して、ウェイクフォレストのスイープを完了しました。

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

粗いパン粉とふわふわの食感のコーンブレッドは、唐辛子を吸い上げるのに理想的な乗り物です。しかし、それだけではありません。

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

ニール・ブロムカンプが、チャッピーが第10地区をどのように遅らせたのかについて話します。フォースの覚醒の噂は、次の予告編に何を期待するかについてのいじめを提供します。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language