Quelle est la différence entre les attributs HTML et les attributs DOM ?

Quelle est la différence entre les attributs HTML et les attributs DOM ? Cet article vous présentera la différence entre les attributs HTML et les attributs DOM. Il a une certaine valeur de référence, les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile

Distinguer les attributs DOM et les attributs d'élément HTML

Tout le monde sait sur les attributs des éléments HTML que vous devriez tous connaître, comme le src, l'id, etc. de l'élément .

Enfin, le navigateur analysera le HTML et construira un modèle DOM, ce qui signifie que le navigateur analysera les éléments HTML en éléments DOM.

Ce que l'on obtient en JavaScript, ce sont des éléments DOM, pas des éléments HTML.

La plupart des noms et valeurs des attributs d'élément HTML et des attributs DOM sont les mêmes, tant de gens pensent à tort qu'ils sont identiques.

La distinction entre les attributs d'un élément HTML et les attributs DOM est un test d'expérience et de mémoire. Désormais, la fonction de manipulation d'attributs de jQuery, attr(), peut oublier ces différences.

Utiliser javascript pour faire fonctionner les attributs DOM

Utiliser javascript pour faire fonctionner les attributs DOM consiste à faire fonctionner les attributs d'objets javascript. Les propriétés des objets JavaScript n'ont pas besoin d'être déclarées. Il existe de nombreuses façons d'accéder aux attributs, comme suit :

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

Étant donné que les accesseurs d'attribut sont fournis, vous pouvez parcourir tous les attributs d'un objet DOM de la manière suivante :

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

Remarque , l'événement ou la fonction est également un attribut de l'objet. Si un objet est un objet DOM, il possède de nombreux attributs par défaut

Utilisez javascript pour exploiter les attributs des éléments HTML

Utilisez getAttribute et setAttribute en javascript pour exploiter les attributs des éléments HTML . Par exemple :

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

En modifiant la classe d'attribut HTML, l'attribut className de l'élément DOM correspondant sera modifié. Mais tous les éléments HTML n'ont pas d'attributs DOM correspondants. Par exemple, les attributs d'éléments HTML personnalisés ne peuvent pas être convertis en attributs DOM. Un autre exemple est l'attribut d'élément "className" qui est assez particulier, car className correspond à la classe HTML

Quelle est la différence entre les attributs HTML et les attributs DOM ?

Pour les moteurs de navigateur, les « balises HTML » n'existent pas. Son essence est un objet nœud DOM. Il n'existe pas de "document HTML". Son essence est une arborescence de documents composée de objets nœuds DOM. Le moteur de navigateur est le « grand frère » qui stocke et restitue les objets de nœud DOM. C'est juste que nous ne pouvons pas faire fonctionner directement le moteur du navigateur, donc nous ne connaissons pas cette essence (en fait, nous n'avons pas besoin de la connaître, mais nous devons la connaître).

L'objet nœud DOM est unique, mais il existe plusieurs façons de manipuler les données de l'objet nœud DOM. Par exemple, pour la largeur d'une image :

• HTML peut être défini via l'attribut width de

• JavaScript peut être défini via element.width pour lire et modifier

• N'oubliez pas CSS, CSS peut également être modifié via l'attribut width ;

Les attributs HTML et Les attributs d'objet JavaScript DOM n'affectent essentiellement que les données d'objet de nœud DOM Une des nombreuses raisons.

Plusieurs raisons affectent les données réelles du même nœud DOM (plusieurs-à-un), assurez-vous de vous rappeler cette raison essentielle.

En détail :

HTML n'est qu'une méthode de description de l'arborescence des documents et des objets nœuds.

• La partie

  analyseur du navigateur transfère directement l'arborescence des documents DOM au moteur du navigateur basé sur HTML.

• Les objets DOM peuvent également être décrits à l'aide d'autres méthodes, telles que JSX. (Bien sûr, lorsque vous utilisez d'autres méthodes pour décrire les objets DOM, le processus de génération de l'arborescence des documents DOM sera certainement modifié en conséquence)

L'objet DOM en JavaScript n'est qu'un Interface pour manipuler les objets DOM dans le moteur du navigateur.

• L'objet DOM en JavaScript et le nœud DOM stocké dans le moteur du navigateur ne sont essentiellement pas la même chose.

• Les utilisateurs n'ont en réalité que l'autorisation de manipuler les objets DOM fournis en JavaScript.

• Le moteur JS et le moteur du navigateur coopèrent pour garantir que l'objet JavaScript DOM est un

  mappage original du nœud DOM dans le moteur.

• De cette manière, les utilisateurs peuvent modifier de manière transparente les nœuds DOM stockés dans le moteur en exploitant des objets DOM JavaScript.

• Essentiellement, le moteur du navigateur n'est responsable du rendu que lorsque l'arborescence DOM est mise à jour, et ne se soucie pas réellement de l'existence de 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教程！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!