Properties and attributes of a DOM element seem same but there is a difference between these two terms. When writing HTML source code, attributes are defined in HTML elements. Browser parses HTML code and a corresponding DOM node is created. This DOM node is an object, and therefore it has properties.

For instance, the HTML element:

<input type="text" value="name">

has 2 attributes.

When above HTML code is parsed by browser a corresponding HTMLInutElement object is created with different properties like accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children etc.

Properties are the properties of that object, and attributes are the elements of the attributes property of that object. When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it’s not a one-to-one relationship.

For instance, the HTML element:

<input id="elementId" type="text" value="name">

the corresponding DOM node will have id, value and type properties :

1) The id property is a reflected property for the id. Changes in the id property will get reflected to id attribute.

2) Value property doesn’t reflect the value instead, it’s the current value of the input. So if user types “Array151” in input box then value will return Array151 but the

Input.getAttribute('value');

will return the value attribute that is name.

3) The type property is a reflected property for the type. Changes in the type property will get reflected to type attribute, but type isn’t a pure reflected property as it is limited to valid types of an input that is some known values.

For instance. If we have an element with type “abc

<input type="abc">

then the

Input.getAttribute("type") 

gives you “abc” 

but the

Input.type 

gives you “text“.

The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.

In nutshell, most of  properties are directly reflection of HTML attributes and some are direct reflections with slightly-different names (htmlFor reflects the for attribute, className reflects the class attribute), many that reflect their attribute but with restrictions/modifications (src, href, disabled, multiple), and so on. For more on this go through the spec

Reference

https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html


Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Interview Questions

Lexical Scope

Scope is the area or location within the program where a variable or function is accessible. Lexical also called static Scoping defines how variable names are resolved in nested functions: inner functions contain the scope Read more…

Javascript

console.log : Stylize console logging in browser

console.log() method logs any string to console window of the browser. But you know, there is a way to provide style to string message even we can draw images 😉 like in facebook prints in console window   Read more…

Interview Questions

Javascript Interview Questions

After javascript can be executed on the server side, it has become very popular. So for better understanding and quality code, there are few concepts that a developer must know. So here are javascript interview questions Read more…