in a form, form.name will usually return the form’s name, but will not if the form has an element named “name”
var f = document.createElement('form');
f.hasAttribute('name'); // false
f.name = 'abc';
f.getAttribute('name'); // "abc"
var i = document.createElement('input');
i.name = 'name';
f.appendChild(i);
f.name; // HTMLInputItem
f.getAttribute('name') // "abc"
f.name = 'efg';
f.name; // HTMLInputItem
f.getAttribute('name') // "efg"
from this exercise, it seems that a FORM’s name property is really its attribute.
this behavior is drastically different from value
var i1 = document.createElement('input');
var i2 = document.createElement('input');
// test value
i1.setAttribute('value','value1');
i1.getAttribute('value'); // value1
i1.value = 'value2';
i1.getAttribute('value'); // value1
i2.value = 'value1';
i2.hasAttribute('value') // false
// test name
i.setAttribute('name','name1');
i.getAttribute('name'); // name1
i.name = 'name2';
i.getAttribute('name'); // name2
i2.name = 'name1';
i2.hasAttribute('name') // true
value uses its attribute as a default, whereas form.name is a method that first tries elements having element.name='name' and then uses the attribute('name')
There is confusion about when and how to access those kind of “special propertys” from a
DOMElement object. Like.name,.value,.tabIndex, etc. The direct object access comes from the old days and works just fine in all major browsers. So basically there is nothing wrong by callingBut as you mentioned, there might be some trouble if there are named child nodes. The
W3Crecommends to always use the.setAttribute()/.getAttribute()methods. In this particular instance its probably the best advice to give. On other occasions I’d still go with the direct access since it’s just so much less to write and also convinient to me.