frm["custom"] vs frm.getAttribute("custom")?

[F. Da Costa]

Hi,

I was wondering *why* there is a difference between the results of the
following two statements. On the suface they seem to do the same (or do they?)

frm["custom"] => returns void

frm.getAttribute("custom") => returns the value of the attribute


The frm (= <form>) element *does* contain the custom="xyz" attribute.

Its not a 'life or death' issue but it did surprise me a bit.

TIA
Fermin DCG

 

[Lasse Reichstein Nielsen]

I was wondering *why* there is a difference between the results of the
following two statements. On the suface they seem to do the same (or
do they?)

frm["custom"] => returns void
frm.getAttribute("custom") => returns the value of the attribute

The frm (= <form>) element *does* contain the custom="xyz" attribute.

In your document, maybe, but not in the HTML specification. So, you are
not writing (correct) HTML 4.

Notice how setting the attribute "class='foo'" in HTML creates a DOM
property called 'className'? That means that there is not direct mapping
between HTML attributes and DOM node properties. The properties that are
1) defined in the HTML specification and 2) defined in the DOM specification
will be mapped from HTML attribute to DOM property. *That* is why
setting "id='bar'" gives a property 'id' with value 'bar', not because
attributes and properties are necessarily the same.

The getAttribute method gets the attribute found in the source text.
The ["custom"] property accessor finds the property on the DOM node.
It is quite possible to have one without the other, if the attribute/
property name is not part of the specifications.

/L

 

[-Ema-]

Hi,

I was wondering *why* there is a difference between the results of the
following two statements. On the suface they seem to do the same (or do
they?)

frm["custom"] => returns void

frm.getAttribute("custom") => returns the value of the attribute


The frm (= <form>) element *does* contain the custom="xyz" attribute.

Its not a 'life or death' issue but it did surprise me a bit.

TIA
Fermin DCG

<form name="myform" id="myform" custom="myvalue" action="..." method="POST">
<input type="text" name="custom2" id="custom2" value="myvalue2"/>
</form>

if you execute the following script on the above context:

// ---------------------------------------------------------------------
var frm = document.forms["myform"];
var field = frm["custom"];
if( field == null )
/*1*/ alert( "Form myform don't contains a field named \"custom\"!" );
else
/*2*/ alert( "Field \"custom\" = " + field.value );

var attrValue = frm.getAttribute("custom");
if( attrValue.length = 0 )
/*3*/ alert( "Form myform don't contains \"custom\" attribute!");
else
/*4*/ alert( "Attribute \"custom\" = " + attrValue );

field = frm["custom2"];
if( field == null )
/*5*/ alert( "The form don't contains a field named \"custom2\"!" );
else
/*6*/ alert( "Field \"custom2\" = " + field.value );
// ---------------------------------------------------------------------

you can see alert 1, 4, 6. This is correct IMHO.
form["fieldName"] point only to the field elements, not to form
attributes. Only some attribute are mapped in form properties.

Regards.
-Ema-

 

[F. Da Costa]

Well explained indeed.
Thx

Fermin

I was wondering *why* there is a difference between the results of the
following two statements. On the suface they seem to do the same (or
do they?)

frm["custom"] => returns void
frm.getAttribute("custom") => returns the value of the attribute

The frm (= <form>) element *does* contain the custom="xyz" attribute.

In your document, maybe, but not in the HTML specification. So, you are
not writing (correct) HTML 4.

Notice how setting the attribute "class='foo'" in HTML creates a DOM
property called 'className'? That means that there is not direct mapping
between HTML attributes and DOM node properties. The properties that are
1) defined in the HTML specification and 2) defined in the DOM specification
will be mapped from HTML attribute to DOM property. *That* is why
setting "id='bar'" gives a property 'id' with value 'bar', not because
attributes and properties are necessarily the same.

The getAttribute method gets the attribute found in the source text.
The ["custom"] property accessor finds the property on the DOM node.
It is quite possible to have one without the other, if the attribute/
property name is not part of the specifications.

/L