HTML 属性と DOM 属性の違いは何ですか?-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2018-10-15 10:58:22

転載

7227 人が閲覧しました

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 属性
と
JavaScript DOM オブジェクト属性

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

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

詳細:

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

ブラウザの

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

DOM オブジェクトは、JSX などの他のメソッドを使用して記述することもできます。 (もちろん、他のメソッドを使用して 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 サイトの他の関連記事を参照してください。