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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

ジェイ・ブルースはどうやら子供を妊娠することによってメッツから離れて取引されていることを祝った

ジェイ・ブルースはどうやら子供を妊娠することによってメッツから離れて取引されていることを祝った

あなたが一時的に会っていなかったとき。シーズン11-1を開始したチームであるニューヨークメッツは、日曜日の午後にフィラデルフィアで行われた最後の11試合の9試合目を失いました。

スティーブンキングのアウトサイダーはトランプ時代のそれです

スティーブンキングのアウトサイダーはトランプ時代のそれです

スティーブン・キングのアウトサイダーは、多くの点で先祖返りの小説であり、80年代の全盛期から引き裂かれたように見える生き物の特徴であり、おそらくセル以来の彼の最もパルプのような本ですが、今日の恐怖の中で間違いなく設立された作品です。表面上は、形を変えるペニーワイズのような子供たちの殺人者を中心としており、その最も暗い脅威は、封じ込められず、神経質に平凡なものよりも幻想的で打ち負かされません。

スティーブンユニバースは、強烈な内部エピソードのペアで、それ自体のバックストーリーをさりげなく粉砕します

スティーブンユニバースは、強烈な内部エピソードのペアで、それ自体のバックストーリーをさりげなく粉砕します

スティーブンユニバースビーチシティのエピソードが実行されるたびに、いくつかのクライマックスイベントが発生し、スティーブンユニバースのより広い神話に対する理解の一部が失われます。これはあなたが期待していたことですか?今日のエピソードは両方とも、容赦なくゆっくりと、シーズンの終盤の主要な部分を設定する決定的な結論に向かって進みます。そして、ロナウドは、静かな納屋が倒れているのを発見した夜中にスティーブンを捕まえるためにやって来ます。月に。

ディズニーワールドの旅行のヒントを教えてください

ディズニーワールドの旅行のヒントを教えてください

「光が触れるものはすべて私たちの王国です。」今週のHackYour Cityでは、1つのテーマパークを取り上げます。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language