Does properties and Attributes mean same in JavaScript?

Question

Properties and Attributes are treated similar by IE 8 and below.

Do they mean same?

HTML elements can also have both properties and Attributes. Properties can be accessed using dot(.) operator with the javascript object whereas, attributes can only be accessed using the getters and setters defined in the DOM. Refer to the Question. Have edited the question. :) — Nilesh, Mar 21 '13 at 18:40
I have rolled your question back to its original form. If you wish to post your own answer, post it as an *answer* below; not as an edit to your question. Also, it is not correct to edit the meaning or purpose of your question after someone has answered it. — Andrew Barber, Mar 21 '13 at 22:28
This question and it's accepted answer is misleading and may generate misunderstanding in the newcomer to javascript. The whole thread, including the discussions and arguments should be read thoroughly. The question was answered (and the answer accepted) by the original poster. The answer is fundamentally flawed. In his comments to other people's answers he assets that **Properties can be accessed using dot(.) operator with the javascript object whereas, attributes can only be accessed using the getters and setters defined in the DOM.** — Radiotrib, Mar 24 '13 at 09:29
Getters and setters are indeed a *convenient way* of accessing attributes, but to assert that this is the *ONLY* way to access them is fundamentally wrong. It denies the basic fact that in javascript there are NO private variables, If the programmer knows where they are he/she can access them using dot or array notation. See my example http://jsfiddle.net/radiotrib/p8Wep/5/ - This thread (and the other one opened on the same topic by the same poster) should be removed or cleaned up. — Radiotrib, Mar 24 '13 at 09:32
Of course, one thing that does have a significance, but which was not part of the original question, is that it is really difficult (though not impossible) to add an as yet undefined attribute to a DOM object without using setAttribute(). However, reference to several other posts on SO indicate that Attributes should be defined as part of the HTML i.e. static after page rendering. Check out the value ATTRIBUTE of a select element in a form (set to the default value on opening) versus the value PROPERTY following a selection ... the attribute is unchanged even after a select ... Caveat Emptor. — Radiotrib, Mar 24 '13 at 15:46
Here is a jsFiddle to show you what I meant in the previous comment. http://jsfiddle.net/radiotrib/yat72/1/ ... The fact is that it is only CUSTOM attributes which cannot be added programatically. (i.e. those not recognised by the DOM as being valid for the DOM object in question). Valid attributes can be added, and existing ones can have their values changed, all using dot notation. I use the example of a iv and a button because name is a valid attribute for a button but a custom attribute for a div. (Adding a name to a div in the html WILL make it accessible via the attribute object.) — Radiotrib, Mar 24 '13 at 16:33

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

What is the difference between attribute and property? has quite a discussion about the semantics ... and different language uses of the terms ...

edited May 23 '17 at 12:08

Community

1
1

answered Mar 21 '13 at 17:03

Radiotrib

629
5
8

The link you provided was not in line what I wanted to share. Refer to my edited question. :) – Nilesh Mar 21 '13 at 18:41
1

this doesn't look anything like the question I originally answered – Radiotrib Mar 21 '13 at 22:08
I have edited the question back to its original form and asked the OP not to do that again. That said, I have a suggestion for answers: Please try to flesh it out here rather than have it just be a link to an external resource. That said, you may or may not want to spend that effort on a question if it's original intent is changing... – Andrew Barber Mar 21 '13 at 22:30
Thanks Andrew .. I think I'll let this one pass by. The thread behind the link I provided says a lot more than I can, and I don't like to replicate things unless absolutely necessary. – Radiotrib Mar 22 '13 at 16:09

score 0 · Accepted Answer · answered Mar 22 '13 at 14:21

0

@all who believes that they are same:

NO.

Properties and Attributes of an HTML element are not the same.

From DOM point of view: Properties are private variables and Attributes are stored in a NamedNodeMap stored as the childNode of the HTML elements

From JavaScript point of view (Implementation): var elem = document.getElementById("ID");

elem.prop = somevalue; //accessing properties

elem.getAttribute("attributeName"); //accessing attributes : getters elem.setAttribute("attributeName","value"); //accessing attributes : setters

Refer to my other answer for implementation details.

answered Mar 22 '13 at 14:21

Nilesh

39
4

Kindly check in HTML4 document in Safari/Chrome, etc that custom Attributes (defined by users) cannot be accessed as elem.attributeName. – Nilesh Mar 22 '13 at 17:55
Your original assertion was : _** HTML elements can also have both properties and Attributes. Properties can be accessed using dot(.) operator with the javascript object whereas, attributes can only be accessed using the getters and setters defined in the DOM**_ vis your refutation of my comment on your answer to Joeframbach. I maintain that both properties AND attributes can be accessed using dot notation. Please provide a real example so that I can see if this is true using uour own chosen DOM object. – Radiotrib Mar 24 '13 at 08:28
my worked example in response to your assertion "attributes can ONLY be accessed using getters and setters" ... http://jsfiddle.net/radiotrib/p8Wep/5/ ... – Radiotrib Mar 24 '13 at 09:15
obj.customAttribute -- in IE8 and below only – Nilesh Mar 24 '13 at 14:53
Is that comment supposed to add something to the context or content of this discussion? – Radiotrib Mar 24 '13 at 15:01

score -1 · Answer 3 · answered Mar 22 '13 at 13:33

Properties and Attributes are not same in DOM. However, treated similar in IE 8 and below.

I faced an issue in cross-browser compatibility.

Issue: Custom Attributes being accessed as properties in an HTML4/JavaScript for IE8. Needed to make the HTML compatible for Chrome, Safari and IE9.

Solution: elements can be iterated to check for the custom-attributes and added those as properties.

Sample Code:

var propertyName = obj.attributes[index].nodeName; //(Attribute names are not case sensitive) obj[propertyName] = value; //(Check for the implementation of the obj.customAttribute)

Tip: Unlike IE 8 and below, IE 9 and above has resolved the issue and treats attributes and properties differently.

This is technically lacking .. `var propertyName = obj.attributes[index].nodeName;` is inadequate because the index of the actual property must be known in advance to attributes except the attribute names - for clarification see the last line of http://jsfiddle.net/radiotrib/p8Wep/8/ - the correct notation for setting an attribute called 'thing' should be `obj.attributes.thing.value = value;` - no iteration over the attributes property is required in order to find the attribute. For clarification see the rest of the jsFiddle at the link above. — Radiotrib, Mar 24 '13 at 13:22

Does properties and Attributes mean same in JavaScript?

3 Answers3