Opera, For In Loop, Same Key Appears Twice

D

dhtml

Title says it. If I use a for in loop on an HTML collection, I get
length twice.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>length twice</title>
</head>
<body>
<form action="javascript:;" id="form1">
<input name="length" type="text"/>
</form>
<script type="text/javascript">
var f = document.forms[0].elements, a=[];
for(p in f) {
a.push('"'+p+'" : ' + f[p]);
}
document.write("<xmp>"+a.join(",\n")+"<"+"/xmp>");
</script>
</body>
</html>

Opera:
"0" : [object HTMLInputElement],
"length" : [object HTMLInputElement],
"length" : [object HTMLInputElement],
"item" : function item() { [native code] },
"namedItem" : function namedItem() { [native code] },
"tags" : function tags() { [native code] }

However, length only appears twice way if the element named -length- is
present. Otherwise, the length property only appears once, and has the
"normal" value of the number of form controls.

What could be happening here? I suspect that there may be an object in
the prototype with a - length - property, but can't verify this.
hasOwnProperty always returns false.

Garrett
 
B

Bart Van der Donck

dhtml said:
<!DOCTYPE HTML>
<html lang="en">
<head>
   <title>length twice</title>
</head>
<body>
<form action="javascript:;" id="form1">
        <input name="length" type="text"/>
</form>
<script type="text/javascript">
var f = document.forms[0].elements, a=[];
for(p in f) {
   a.push('"'+p+'" : ' + f[p]);}

document.write("<xmp>"+a.join(",\n")+"<"+"/xmp>");
</script>
</body>
</html>

Opera:
"0" : [object HTMLInputElement],
"length" : [object HTMLInputElement],
"length" : [object HTMLInputElement],
"item" : function item() { [native code] },
"namedItem" : function namedItem() { [native code] },
"tags" : function tags() { [native code] }

However, length only appears twice way if the element named -length- is
present. Otherwise, the length property only appears once, and has the
"normal" value of the number of form controls.

What could be happening here? I suspect that there may be an object in
the prototype with a - length - property, but can't verify this.
hasOwnProperty always returns false.

The one refers to your user-defined object
document.forms[0].elements['length'] (multi-dimensional, accessible by
its properties/methods) and the other to the syntactically identical
host object (but as a one-dimensional immatricial variable).

Your test does not show the same result in my Opera 9.22.8801; there
the user-defined object appears to overwrite the host object.

It is never good to give names like "length" to user-defined objects.
 
D

dhtml

GArlington said:
(in Opera)

AVOID using predefined [reserved] var names for your own vars/fields...


Yes, of course.

I used an element named "length" on purpose. The goal is to learn about
the browser.

The for in loop should not expose the same key twice. I wonder what
Opera is doing.

Garrett
 
K

kangax

AVOID using predefined [reserved] var names for your own vars/fields...

Yes, of course.

I used an element named "length" on purpose. The goal is to learn about
the browser.

The for in loop should not expose the same key twice. I wonder what
Opera is doing.

Garrett

I can reproduce this in ver. 9.51 (build 4886) on Mac OS X (10.5.4)

Moreover, when element with name="toString" is present, any attempt to
obtain a reference to a form element (containing that element)
produces an error:

"The Object does not implement [[Call]]"
 
R

RobG

AVOID using predefined [reserved] var names for your own vars/fields...

Yes, of course.

I used an element named "length" on purpose. The goal is to learn about
the browser.

The for in loop should not expose the same key twice.

As far as I can determine, ECMA-262 doesn't specify that property
names must be unique, though clearly there are issues if they aren't.
It also lets host objects do pretty much as they please.

I wonder what Opera is doing.

It can do what it likes as long as it conforms to to ECMA-262. How it
chooses to reference properties internally for [[Get]] and [[Put]] is
up to Opera, the spec says in regard to internal methods (bottom of
Section 8.6.2):

"Host objects may implement these methods in any manner unless
specified otherwise; for example, one possibility is that
[[Get]] and [[Put]] for a particular host object indeed fetch
and store property values but [[HasProperty]] always generates
false"
 
D

dhtml

kangax said:
GArlington said:
dhtml wrote:
Title says it. If I use a for in loop on an HTML collection, I get
length twice.
(in Opera)
Garrett
AVOID using predefined [reserved] var names for your own vars/fields...
Yes, of course.

I used an element named "length" on purpose. The goal is to learn about
the browser.

The for in loop should not expose the same key twice. I wonder what
Opera is doing.

Garrett

I can reproduce this in ver. 9.51 (build 4886) on Mac OS X (10.5.4)

I'm still on 10.4. No iphone emulator.
Moreover, when element with name="toString" is present, any attempt to
obtain a reference to a form element (containing that element)
produces an error:

javascript:alert(document.forms[0].elements.toString);
javascript:alert(document.forms[0].toString);
I don't get the error.

Only with:
javascript:alert(document.forms[0]);

Because the alert method is probably trying to get the DefaultValue and
ends up calling document.forms[0].toString, but
document.forms[0].toString is an element.

Garrett
"The Object does not implement [[Call]]"
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]>
Title says it.

Body of an article should stand alone, without reference to Subject -
S(N)OP. Bug reports should include browser version.
If I use a for in loop on an HTML collection, I get length twice.

MS IE 7.0.5730.13 - long list, length twice
Safari 3.1.2 - short list, length once
Firefox 2.0.0.16 - short list, length once
Opera 9.27 - short list, length once

It's a good idea to read the newsgroup c.l.j and its FAQ. See below.
 
D

dhtml

dhtml said:
kangax said:
GArlington wrote:
dhtml wrote:
Title says it. If I use a for in loop on an HTML collection, I get
length twice.
(in Opera)
Garrett
AVOID using predefined [reserved] var names for your own vars/fields...
Yes, of course.

I used an element named "length" on purpose. The goal is to learn about
the browser.

The for in loop should not expose the same key twice. I wonder what
Opera is doing.

Garrett

I can reproduce this in ver. 9.51 (build 4886) on Mac OS X (10.5.4)

I'm still on 10.4. No iphone emulator.
Moreover, when element with name="toString" is present, any attempt to
obtain a reference to a form element (containing that element)
produces an error:

javascript:alert(document.forms[0].elements.toString);
javascript:alert(document.forms[0].toString);
I don't get the error.

Only with:
javascript:alert(document.forms[0]);

Given this HTML:
<form>
<input name="toString">
Because the alert method is probably trying to get the DefaultValue and
ends up calling document.forms[0].toString, but
document.forms[0].toString is an element.

But:

javascript:alert(document.forms[0]+'')
Garrett

"The Object does not implement [[Call]]"
 
K

kangax

[snip]
Moreover, when element with name="toString" is present, any attempt to
obtain a reference to a form element (containing that element)
produces an error:

javascript:alert(document.forms[0].elements.toString);
javascript:alert(document.forms[0].toString);
I don't get the error.

Only with:
javascript:alert(document.forms[0]);

Sorry for poor wording.
Yes, what I meant is that calling `toString` (explicitly or
implicitly) results in an error (since `toString` refers to an
element).
Because the alert method is probably trying to get the DefaultValue and
ends up calling document.forms[0].toString, but
document.forms[0].toString is an element.

It looks like Opera's way of implementing HTMLCollection differs from
the one in, say, Gecko. Gecko doesn't "shadow" certain members of
HTMLCollection. Opera, on the other hand, does. When a form has
element with name="item" (in Opera), `elements.item` references that
element (and so resulting in error when trying to call it). Gecko
keeps reference to an "HTMLCollection interface" `item` method even
when a same-named element is present:

<form>
<input name="item">
</form>

// [object HTMLInputElement] in Opera 9.5
// "function item() { [native code] }" in Firefox 3.0.1

document.forms[0].elements.item;
 
D

dhtml

kangax said:
[snip]
Moreover, when element with name="toString" is present, any attempt to
obtain a reference to a form element (containing that element)
produces an error:
javascript:alert(document.forms[0].elements.toString);
javascript:alert(document.forms[0].toString);
I don't get the error.

Only with:
javascript:alert(document.forms[0]);

Sorry for poor wording.
Yes, what I meant is that calling `toString` (explicitly or
implicitly) results in an error (since `toString` refers to an
element).
Because the alert method is probably trying to get the DefaultValue and
ends up calling document.forms[0].toString, but
document.forms[0].toString is an element.

It looks like Opera's way of implementing HTMLCollection differs from
the one in, say, Gecko. Gecko doesn't "shadow" certain members of
HTMLCollection. Opera, on the other hand, does.

There seems to be something to that.
When a form has
element with name="item" (in Opera), `elements.item` references that
element (and so resulting in error when trying to call it). Gecko
keeps reference to an "HTMLCollection interface" `item` method even
when a same-named element is present:

<form>
<input name="item">
</form>

// [object HTMLInputElement] in Opera 9.5
// "function item() { [native code] }" in Firefox 3.0.1

document.forms[0].elements.item;

That is not the result I get. Example:-

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Enumerate Form</title>
</head>
<body>
<form action="">
<input name="item">
</form>

<script type="text/javascript">
document.write("document.forms[0].item = "
+ document.forms[0].item);
</script>

</body>
</html>


FF 3.0.1, Safari 3.1.1, Opera 9.51
document.forms[0].item = [object HTMLInputElement]

Garrett
 
D

dhtml

dhtml said:
kangax said:
[snip]
Moreover, when element with name="toString" is present, any attempt to
obtain a reference to a form element (containing that element)
produces an error:
javascript:alert(document.forms[0].elements.toString);
javascript:alert(document.forms[0].toString);
I don't get the error.

Only with:
javascript:alert(document.forms[0]);

Sorry for poor wording.
Yes, what I meant is that calling `toString` (explicitly or
implicitly) results in an error (since `toString` refers to an
element).
Because the alert method is probably trying to get the DefaultValue and
ends up calling document.forms[0].toString, but
document.forms[0].toString is an element.

It looks like Opera's way of implementing HTMLCollection differs from
the one in, say, Gecko. Gecko doesn't "shadow" certain members of
HTMLCollection. Opera, on the other hand, does.

There seems to be something to that.
When a form has
element with name="item" (in Opera), `elements.item` references that
element (and so resulting in error when trying to call it). Gecko
keeps reference to an "HTMLCollection interface" `item` method even
when a same-named element is present:

<form>
<input name="item">
</form>

// [object HTMLInputElement] in Opera 9.5
// "function item() { [native code] }" in Firefox 3.0.1

document.forms[0].elements.item;

Oh, with the elements.item, I do get that result, sorry got a little
confused between your message and the example I was looking at.

It appears that the - item - property does not exist on the form, but
only on form.elements.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Enumerate Form</title>
</head>
<body>
<form action="">
<input name="item">
</form>

<pre><script type="text/javascript">
var form = document.forms[0],
elements = form.elements,
d = document;

d.writeln("item in form: " + ('item 'in form))
d.writeln("item in elements: " + ('item' in elements))
</script>
</pre>
</body>
</html>

Firefox 3.0.1, Safari 3.1.1, Opera 9.51
item in form: false
item in elements: true

That is just testing for presence of a property but doesn't tell us what
the value is if the property is gotten. This next example shows that The
elements.item property has the value of the method in Firefox and Safari.

The example also attempts to assign to form.item and form.elements.item.

The item property, when replaced with an element, is writable in Opera.

In Firefox, attempting to assing to elements.item ends up changing the
item property, but to have the value of the INPUT, not to the value
assigned!

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Enumerate Form</title>
</head>
<body>
<form action="">
<input name="item">
</form>

<pre><script type="text/javascript">
var form = document.forms[0],
elements = form.elements,
d = document;

d.writeln(" before:\n isEl(form.item) = " + assertEl(form.item));
d.writeln(" isEl(elements.item) = "+assertEl(elements.item)+ '\n');

form.item = 1; elements.item = 2;

d.writeln(" after:\n isEl(form.item) = " + assertEl(form.item));
d.writeln(" isEl(elements.item)= "+ assertEl(elements.item));
function assertEl(o) {
if(o && !!o.tagName) return "true";
return 'false: ' +typeof o;
}
</script>
</pre>
</body>
</html>

Results:

Firefox 3.0.1:
before:
isEl(form.item) = true
isEl(elements.item) = false: function

after:
isEl(form.item) = true
isEl(elements.item)= true
(Strange................^^^^)

Opera 9.51:
before:
isEl(form.item) = true
isEl(elements.item) = true

after:
isEl(form.item) = false: number
isEl(elements.item)= false: number

Safari 3.1.1:
before:
isEl(form.item) = true
isEl(elements.item) = false: function

after:
isEl(form.item) = true
isEl(elements.item)= false: function


Getting a property off of the elements collection works differently.
Modifying the form or elements with user-defined properties can have
strange results.

Garrett
That is not the result I get. Example:-

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Enumerate Form</title>
</head>
<body>
<form action="">
<input name="item">
</form>

<script type="text/javascript">
document.write("document.forms[0].item = "
+ document.forms[0].item);
</script>

</body>
</html>


FF 3.0.1, Safari 3.1.1, Opera 9.51
document.forms[0].item = [object HTMLInputElement]

Garrett

 
L

Lasse Reichstein Nielsen

Bart Van der Donck said:
It is never good to give names like "length" to user-defined objects.

.... except perhaps if you are making your own object and want the
generic methods of Array.prototype or String.prototype to apply to it.
I.e., unless you know what you are doing :)
/L
 
D

dhtml

Lasse said:
... except perhaps if you are making your own object and want the
generic methods of Array.prototype or String.prototype to apply to it.
I.e., unless you know what you are doing :)

Yes. "Making your own object" would be a user-defined object.

A form is a Host object, not a user-defined object. Bart probably meant
that giving the form a "length" element resulted in it having a new
length property and that I shouldn't be doing that.

Of course I was doing that on purpose to try to investigate an edge
case. (I still don't have a conclusive answer).

In Opera, and IE, the property seems to exist in two places. One length
is on the object itself, the other is possibly in some intermediate
object (but I really don't know).

Garrett
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top