<!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
>
> Garrett
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.
--
Bart
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]]"
--
kangax
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"
--
Rob
Here's my guess on Opera's behavior:
Opera is Enumerating over the object and the interface for
HTMLCollection to get enumerable keys.
But that's just my guess.
Garrett
> --
> Rob
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
>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.
--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk IE7 FF2 Op9 Sf3
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Given this HTML:
<form>
<input name="toString">
</form>
> 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]+'')
[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;
>
> Garrett
--
kangax
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
>> Garrett
>
> --
> kangax
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
> 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
--
Lasse Reichstein Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
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
> /L