One thing people don't seem to be able to understand is the difference between attributes and properties of a DOM element. An attribute is a value set in the HTML/XML source using the form: width="60". In script, you can retrieve the value of an attribute using the getAttribute function. A property can be retrieved using the dot syntax such as element.style to get the style property of an element.

For various architectural reasons, in IE both attributes and properties are the same thing. There, you can retrieve a attribute using either the getAttribute or dot syntax, as there is no distinction made between them.

In Mozilla, this is (correctly) not the case. An attribute and property are distinct entities and may have different values. Also, an element may have a specific attribute such as 'width', but not have a corresponding 'width' property. However, it is often the case that such a property will exist and will just return the corresponding attribute's value. For instance, the XUL width property just translates to a call to getAttribute("width") to retrieve the width.

When retrieving the value of an attribute, Mozilla just returns the string that is stored on the element. When retrieving the value of a property, its value is usually calculated dynamically. In many cases, properties don't use any memory for the storage of values. For example, since the XUL width property just retrieves the value from the attribute, it doesn't store any value of its own.

Moreover, it is possible for an attribute to have one value, and a property with the same name to have a different value. There are several reasons. First, is that attributes are always strings, as they need to be serialized into source form. Properties may have any type, and frequently do. For instance, if the XUL hidden attribute returned the string "true" the hidden property will return the boolean value true.

In some situations, the values will differ. For instance, given an anchor in an HTML document (an A tag), someanchor.getAttribute("href") might return "nmain.css", whereas someanchor.href would return the absolute path "http://www.xulplanet.com/ndeakin/nmain.css".

But many people seem to assume that both attributes and properties are one and the same. Perhaps they are used to IE. The most common confusion lies in the textbox value (<input value="xyz">). The value attribute only specifies the default value of the textbox. The value property can be used to retrieve the current value in the textbox. Even if the user enters text into the textbox, the value attribute will remain the same as it was before.

If the value attribute needed to be changed every time the user typed something, this would likely cause a performance hit, as the code would have to copy the current value onto the attribute each time. This doesn't necessarily cause a problem for all implementations, but some may have issues with this requirement.