What is the difference between HTML attributes and DOM attributes?

What is the difference between HTML attributes and DOM attributes? This article will introduce to you the difference between HTML attributes and DOM attributes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Distinguish between DOM attributes and HTML element attributes

The attributes of HTML elements everyone You should all know, such as the src, id, etc. of the element.

Finally, the browser will parse HTML and build a DOM model, which means that the browser will parse HTML elements into DOM elements.

What is obtained in javascript are DOM elements, not HTML elements.

Most of the names and values ​​of HTML element attributes and DOM attributes are the same, so many people mistakenly think that they are the same.

Distinguishing HTML element attributes and DOM attributes is a test of experience and memory. That was once. Now jQuery's attribute manipulation function attr() can forget these differences.

Use javascript to operate DOM attributes

Using javascript to operate DOM attributes is to operate the attributes of javascript objects. The properties of JavaScript objects do not need to be declared. There are many ways to access properties, as follows:

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

Because the property accessor is provided, you can traverse all properties of a DOM object in the following way:

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

Note that events or functions It is also a property of the object. If an object is a DOM object, it has many attributes by default

Use javascript to operate HTML element attributes

Use getAttribute and setAttribute in javascript to operate HTML Element properties. For example:

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

By changing the HTML attribute class, the className attribute of the corresponding DOM element will be changed. But not all HTML elements have corresponding DOM attributes. For example, custom HTML element attributes cannot be converted into DOM attributes. Another example is the element attribute "className" which is quite special because className corresponds to the HTML class.

What is the difference between HTML attributes and DOM attributes?

For browser engines, there is no such thing as "HTML tags". Its essence is DOM node object. There is no such thing as an "HTML document". Its essence is a document tree composed of DOM node objects. The browser engine is the "big brother" that actually stores and renders DOM node objects. It’s just that we can’t directly operate the browser engine, so we are not familiar with this essence (in fact, we don’t need to be familiar with it, but we need to know it).

The DOM node object is unique, but there is more than one way to manipulate the data of the DOM node object. For example, for the width of an image:

• ##HTML can be defined through the width attribute of ;

• JavaScript can be defined through element.width to read and modify;

• Don’t forget CSS, CSS can also be modified through the width attribute.

HTML attributes and JavaScript DOM object attributes are essentially just affecting DOM node object data One of many reasons.

Multiple reasons affect the actual data of the same DOM node (many to one), please be sure to remember this essential reason.

In detail:

HTML is just a description method for document trees and node objects.

• The

  parser part of the browser directly passes the DOM document tree to the browser engine based on HTML.

• DOM objects can also be described using other methods, such as JSX. (Of course, when using other methods to describe DOM objects, the process of generating the DOM document tree will definitely be modified accordingly)

The DOM object in JavaScript is just a Interface for manipulating DOM objects in the browser engine.

• The DOM object in JavaScript and the DOM node stored in the browser engine are essentially not the same thing.

• Users actually only have the right to manipulate DOM objects provided in JavaScript.

• The JS engine and the browser engine cooperate to ensure that the JavaScript DOM object is an

  original mapping of the DOM node in the engine.

• In this way, users can transparently modify the DOM nodes stored in the engine by operating JavaScript DOM objects.

• The browser engine is essentially responsible for re-rendering when the DOM tree is updated, and does not actually care about the existence of 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教程！

The above is the detailed content of What is the difference between HTML attributes and DOM attributes?. For more information, please follow other related articles on the PHP Chinese website!