Was ist der Unterschied zwischen HTML-Attributen und DOM-Attributen?

Was ist der Unterschied zwischen HTML-Attributen und DOM-Attributen? In diesem Artikel wird Ihnen der Unterschied zwischen HTML-Attributen und DOM-Attributen vorgestellt. Es hat einen gewissen Referenzwert, Freunde in Not können darauf verweisen, ich hoffe, es wird Ihnen hilfreich sein

Unterscheiden Sie zwischen DOM-Attributen und HTML-Elementattributen

Jeder kennt die Attribute von HTML-Elementen, die Sie alle kennen sollten, wie z. B. src, id usw. des -Elements.

Schließlich analysiert der Browser HTML und erstellt ein DOM-Modell, was bedeutet, dass der Browser HTML-Elemente in DOM-Elemente analysiert.

Was in JavaScript erhalten wird, sind DOM-Elemente, keine HTML-Elemente.

Die meisten Namen und Werte von HTML-Elementattributen und DOM-Attributen sind gleich, so viele Leute denken fälschlicherweise, dass sie gleich sind.

Die Unterscheidung zwischen HTML-Elementattributen und DOM-Attributen ist ein Test für Erfahrung und Gedächtnis. Das war einmal. Jetzt kann die Attributmanipulationsfunktion attr() von jQuery diese Unterschiede vergessen.

Javascript zum Betreiben von DOM-Attributen verwenden

Javascript zum Betreiben von DOM-Attributen verwenden bedeutet, die Attribute von Javascript-Objekten zu bedienen. Die Eigenschaften von JavaScript-Objekten müssen nicht deklariert werden. Es gibt viele Möglichkeiten, auf Attribute zuzugreifen, wie folgt:

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

Da Attribut-Accessoren bereitgestellt werden, können Sie alle Attribute eines DOM-Objekts auf folgende Weise durchlaufen:

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

Beachten Sie, dass Ereignisse oder Funktionen Es ist auch eine Eigenschaft des Objekts. Wenn es sich bei einem Objekt um ein DOM-Objekt handelt, verfügt es standardmäßig über viele Attribute.

Verwenden Sie Javascript, um HTML-Elementattribute zu bedienen.

Verwenden Sie getAttribute und setAttribute in Javascript, um HTML-Elementeigenschaften zu bedienen . Beispiel:

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

Durch Ändern der HTML-Attributklasse wird das className-Attribut des entsprechenden DOM-Elements geändert. Aber nicht alle HTML-Elemente verfügen über entsprechende DOM-Attribute. Beispielsweise können benutzerdefinierte HTML-Elementattribute nicht in DOM-Attribute konvertiert werden. Ein weiteres Beispiel ist das Elementattribut „className“, das etwas ganz Besonderes ist, da className der HTML-Klasse entspricht

Was ist der Unterschied zwischen HTML-Attributen und DOM-Attributen?

Für Browser-Engines gibt es keine „HTML-Tags“. Seine Essenz ist DOM-Knotenobjekt. Es gibt kein „HTML-Dokument“. Sein Wesen ist ein Dokumentbaum, der aus DOM-Knotenobjekten besteht. Die Browser-Engine ist der „große Bruder“, der tatsächlich DOM-Knotenobjekte speichert und rendert. Wir können die Browser-Engine nur nicht direkt bedienen und sind daher mit dieser Essenz nicht vertraut (tatsächlich müssen wir nicht damit vertraut sein, aber wir müssen sie kennen).

Das DOM-Knotenobjekt ist einzigartig, aber es gibt mehr als eine Möglichkeit, die Daten des DOM-Knotenobjekts zu manipulieren. Zum Beispiel für die Breite eines Bildes:

• HTML kann über das width-Attribut von

• <🎜 definiert werden >JavaScript kann über element.width zum Lesen und Ändern definiert werden.

• Vergessen Sie CSS nicht, CSS kann auch über das width-Attribut geändert werden.

HTML-Attribute und JavaScript-DOM-Objektattribute wirken sich im Wesentlichen nur auf DOM-Knotenobjektdaten aus Einer von vielen Gründen.

Mehrere Gründe wirken sich auf die tatsächlichen Daten desselben DOM-Knotens aus (viele-zu-eins), bitte denken Sie unbedingt an diesen wesentlichen Grund.

Im Detail:

HTML ist nur eine Beschreibungsmethode für Dokumentbaum- und Knotenobjekte.

• Der

  Parser-Teil des Browsers überträgt den DOM-Dokumentenbaum direkt auf HTML-Basis an die Browser-Engine.

• DOM-Objekte können auch mit anderen Methoden beschrieben werden, beispielsweise mit JSX. (Wenn Sie andere Methoden zum Beschreiben von DOM-Objekten verwenden, wird der Prozess der Generierung des DOM-Dokumentbaums natürlich entsprechend geändert.)

Das DOM-Objekt in JavaScript ist nur ein Schnittstelle zum Bearbeiten von DOM-Objekten in der Browser-Engine.

• Das DOM-Objekt in JavaScript und der in der Browser-Engine gespeicherte DOM-Knoten sind im Wesentlichen nicht dasselbe.

• Benutzer haben eigentlich nur die Berechtigung, in JavaScript bereitgestellte DOM-Objekte zu manipulieren.

• Die JS-Engine und die Browser-Engine arbeiten zusammen, um sicherzustellen, dass das JavaScript-DOM-Objekt eine

  ursprüngliche Zuordnung des DOM-Knotens in der Engine ist.

• Auf diese Weise können Benutzer die in der Engine gespeicherten DOM-Knoten transparent ändern, indem sie JavaScript-DOM-Objekte bedienen.

• Im Wesentlichen ist die Browser-Engine nur für das erneute Rendern verantwortlich, wenn der DOM-Baum aktualisiert wird, und kümmert sich eigentlich nicht um die Existenz von 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教程！

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen HTML-Attributen und DOM-Attributen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!