What is the difference between properties and attributes in HTML?

Question

After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.

Looking at the list on the jQuery 1.6.

Answer 1

Difference HTML properties and attributes:

Let's first look at the definitions of these words before evaluating what the difference is in HTML:

English definition:

• Attributes are referring to additional information of an object.
• Properties are describing the characteristics of an object.

In HTML context:

When the browser parses the HTML, it creates a tree data structure wich basically is an in memory representation of the HTML. It the tree data structure contains nodes which are HTML elements and text. Attributes and properties relate to this is the following manner:

• Attributes are additional information which we can put in the HTML to initialize certain DOM properties.
• Properties are formed when the browser parses the HTML and generates the DOM. Each of the elements in the DOM have their own set of properties which are all set by the browser. Some of these properties can have their initial value set by HTML attributes. Whenever a DOM property changes which has influence on the rendered page, the page will be immediately re rendered

It is also important to realize that the mapping of these properties is not 1 to 1. In other words, not every attribute which we give on an HTML element will have a similar named DOM property.

Furthermore have different DOM elements different properties. For example, an element has a value property which is not present on a

property.

Example:

Let's take the following HTML document:

 


    
   
  


hi
 

Then we inspect the

, in the JS console:

 console.dir(document.getElementById('foo'));

We see the following DOM properties (chrome devtools, not all properties shown):

• We can see that the attribute id in the HTML is now also a id property in the DOM. The id has been initialized by the HTML (although we could change it with javascript).
• We can see that the class attribute in the HTML has no corresponding class property (class is reserved keyword in JS). But actually 2 properties, classList and className.

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...