HTML 属性と DOM 属性の違いは何ですか?

HTML 属性と DOM 属性の違いは何ですか?この記事では、HTML 属性と DOM 属性の違いを紹介します。特定の参考値が含まれています。必要な友人が参考になれば幸いです。

DOM 属性と HTML 要素の属性を区別する

# 要素の src や id など、誰もが知っておくべき HTML 要素の属性。

最後に、ブラウザは HTML を解析して DOM モデルを構築します。これは、ブラウザが HTML 要素を DOM 要素に解析することを意味します。

JavaScript で取得されるのは HTML 要素ではなく DOM 要素です。

HTML 要素の属性と DOM 属性の名前と値のほとんどは同じなので、非常に多くの人がそれらが同じであると誤解しています。

HTML 要素の属性と DOM 属性を区別するには、経験と記憶が試されます。 jQuery の属性操作関数 attr() は、これらの違いを無視できるようになりました。

JavaScript を使用して DOM 属性を操作する

JavaScript を使用して DOM 属性を操作するとは、JavaScript オブジェクトの属性を操作することです。 JavaScript オブジェクトのプロパティを宣言する必要はありません。プロパティにアクセスするには、次のようにさまざまな方法があります:

myImg.src = "xxxxxx" //使用“.”运算符
myImg["src"] = "xxxxxx" // 使用属性访问器
var propName = "src";
myImg[propName] = "xxxxxx" //属性访问器支持变量

プロパティ アクセサーが提供されているため、次の方法で DOM オブジェクトのすべてのプロパティをトラバースできます:

var result = "";
for (var p in myImg)
{
result += "属性名：" + p + "，属性值：" + myImg[p] + "\n";
}

イベントまたは関数 これはオブジェクトのプロパティでもあります。オブジェクトが DOM オブジェクトの場合、デフォルトで多くの属性があります

JavaScript を使用して HTML 要素の属性を操作します

JavaScript で getAttribute および setAttribute を使用して HTML 要素のプロパティを操作します。例:

alert(myImg.getAttribute("class"));
myImg.setAttribute("class","myclass2");

HTML 属性クラスを変更すると、対応する DOM 要素の className 属性が変更されます。ただし、すべての HTML 要素に対応する DOM 属性があるわけではありません。たとえば、カスタム HTML 要素の属性を DOM 属性に変換することはできません。もう 1 つの例は、要素属性「className」です。className は HTML クラスに対応するため、非常に特殊です。

HTML 属性と DOM 属性の違いは何ですか?

ブラウザ エンジンには、「HTML タグ」のようなものはありません。その本質は

DOM ノード オブジェクト です。 「HTML ドキュメント」などというものは存在せず、その本質は DOM ノード オブジェクト で構成されるドキュメント ツリーです。 ブラウザ エンジンは、実際に DOM ノード オブジェクトを保存およびレンダリングする「兄貴分」です。。私たちはブラウザエンジンを直接操作できないので、この本質に精通していないだけです（実際、精通する必要はありませんが、知っておく必要があります）。

DOM ノード オブジェクトは一意ですが、DOM ノード オブジェクトのデータを操作する方法は複数あります。たとえば、画像の幅の場合:

##HTML は の width 属性によって定義できます。 JavaScript は、element.width を通じて読み取りと変更を定義できます。
CSS を忘れないでください。CSS は width 属性を通じても変更できます。
• HTML 属性

  と

  JavaScript DOM オブジェクト属性
は、本質的には

DOM ノード オブジェクト データに影響を与えるだけです

多くの理由の 1 つです。 複数の理由が同じ DOM ノード (多対 1) の実際のデータに影響します。この重要な理由を必ず覚えておいてください。

詳細:

HTML は、ドキュメント ツリーとノード オブジェクトの単なる記述メソッドです。

ブラウザの

parser 部分は、HTML に基づいて DOM ドキュメント ツリーをブラウザ エンジンに直接渡します。

• DOM オブジェクトは、JSX などの他のメソッドを使用して記述することもできます。 (もちろん、他のメソッドを使用して DOM オブジェクトを記述する場合、DOM ドキュメント ツリーを生成するプロセスはそれに応じて確実に変更されます)

JavaScript の DOM オブジェクトは単なるブラウザ エンジンで DOM オブジェクトを操作するためのインターフェイス
• 。

JavaScript の DOM オブジェクトとブラウザ エンジンに保存される DOM ノードは、本質的には同じものではありません。

ユーザーは実際には、JavaScript で提供される DOM オブジェクトを操作する権限のみを持っています。

• JS エンジンとブラウザ エンジンは連携して、JavaScript DOM オブジェクトがエンジン内の DOM ノードの
元のマッピング
• であることを確認します。

• このように、ユーザーは JavaScript DOM オブジェクトを操作することで、エンジンに格納されている DOM ノードを透過的に変更できます。
  ブラウザ エンジンは基本的に、DOM ツリーが更新されたときに再レンダリングを担当し、実際には JS の存在を気にしません。

• 你如果用其他办法修改了引擎使用的DOM树，也能更新文档结构。（当然这种办法基本上不存在…）

至于HTML属性名和JavaScript DOM对象的属性名大多相似或等同，这仅仅是人为的方便。我如果喜欢我也可以设计成这样嘛：

// <img src="http://localhost/1.png" alt="alt text" width=640 height=480 />
node.DataSource = "http://localhost/1.png";
node.AlternativeText = "alt text";
node.Dimension.Width = 640;
node.Dimension.Height = 480;

虽然这样就真的没法记了。

JavaScript DOM对象属性名和HTML属性名的近似，是JavaScript给Web开发者的恩惠。选择只记忆HTML属性名，然后记忆（或者是踩坑了再反查）JavaScript属性名中少量和HTML不同名的差异点，这是很自然的。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！

以上がHTML 属性と DOM 属性の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。