IE vs. DOM

[Joe Kelsey]

The following works fine in Mozilla:
var makeSelect = function (firstOption, lastOption, thisOption,
thisList)
{
var select = document.createElement ("select");
for (var i = firstOption; i <= lastOption; ++i)
{
var option = document.createElement ("option");
option.value = i;
if (thisList)
{
option.appendChild (document.createTextNode (thisList));
}
else
{
option.appendChild (document.createTextNode (i));
}
if (i == thisOption)
{
option.selected = 1;
option.style.fontWeight = "bold";
}
select.add (option, null);
}
return select;
};

However, IE 6 complains about the select.add statement. The MSDN
documentation on select spouts some sort of blather about using
select.options.add, but that doesn't work either. I notice that IE
defines the add method to take an element and an index rather than two
elements, thus violating the DOM standard.

Any ideas?

 

[Martin Honnen]

The following works fine in Mozilla:
var makeSelect = function (firstOption, lastOption, thisOption,
thisList)
{
var select = document.createElement ("select");
for (var i = firstOption; i <= lastOption; ++i)
{
var option = document.createElement ("option");
option.value = i;
if (thisList)
{
option.appendChild (document.createTextNode (thisList));
}
else
{
option.appendChild (document.createTextNode (i));
}
if (i == thisOption)
{
option.selected = 1;
option.style.fontWeight = "bold";
}
select.add (option, null);
}
return select;
};

However, IE 6 complains about the select.add statement. The MSDN
documentation on select spouts some sort of blather about using
select.options.add, but that doesn't work either. I notice that IE
defines the add method to take an element and an index rather than two
elements, thus violating the DOM standard.

Any ideas?

IE4 already implemented
select.add(option, index)
and whenever there is difference between IE's DOM and the W3C DOM then
so far IE sticks with the IE DOM

 

[Jim Ley]

The following works fine in Mozilla:
[SELECT...]

Any ideas?

Use DOM 0, it has the advantage that it works...

Jim.

 

[Richard Cornford]

The following works fine in Mozilla:
var makeSelect = function (firstOption, lastOption, thisOption,
thisList)
{
var select = document.createElement ("select");
for (var i = firstOption; i <= lastOption; ++i)
{
var option = document.createElement ("option");

option.selected = 1;

The 'selected' property of an option element is boolean so it probably
should be being set to true (in this case) or false, for clarity, to
avoid the type-conversion and possible implementation errors.

}
select.add (option, null);
}
return select;
};

However, IE 6 complains about the select.add statement. The
MSDN documentation on select spouts some sort of blather about
using select.options.add, but that doesn't work either. I
notice that IE defines the add method to take an element and
an index rather than two elements, thus violating the DOM
standard.

Any ideas?

By "any ideas" I assume you mean 'what will work?'.

IE also does not work with:-

select.appendChild(options);

However:-

select.options[select.options.length] = option;

-does work on IE and Mozilla/Gecko, Opera 7 and probably other DOM
browsers (as it is essentially the way that options were added before
the standards existed so it is supported for back-compatibility).

Richard.

 

[Joe Kelsey]

Just as a side note, this version works in both IE and Moz:

var makeSelect = function (firstOption, lastOption, thisOption,
thisList)
{
var select = document.createElement ("select");
var option;

for (var i = firstOption; i <= lastOption; ++i)
{
option = document.createElement ("option");
// Not only does IE define the add method incorrectly,
// it also requires that you add the option to the select
// options collection *before* you can do anything else to it.
if (document.all)
{
// So much for DOM compliance in IE...
select.add (option);
}
else
{
select.add (option, null);
}
option.value = i;
if (thisList)
{
option.appendChild (document.createTextNode (thisList));
}
else
{
option.appendChild (document.createTextNode (i));
}
if (i == thisOption)
{
option.selected = true;
option.style.fontWeight = "bold";
}
}
return select;
};

So, in order to do DOM 1 operations in IE, you have to know about the
incorrectly-implemented functions, read between the lines of
badly-written MSDN articles and follow the folklore documented in
various places like this newsgroup FAQ.

I suppose if I had started writing javascript a few years ago, I might
know some of these idiosyncracies. Since I just started using
javascript, I find it difficuly to go from the standard documents to
implementation without tripping over all of these cracks in the
implementations.

Anyway, the makeSelect function now works in both IE and Moz, the only
browsers I currently need to support for this internal application.
If anyone has any insight into other browser limitations, it might be
interesting, or not. Many articles seem to just fly past this group.

/Joe

 

[Richard Cornford]

if (document.all)
{
// So much for DOM compliance in IE...
select.add (option);
}
else
{
select.add (option, null);

If anyone has any insight into other browser limitations,
it might be interesting, or not. Many articles seem to
just fly past this group.

Your - if(document.all) - test is OK on Mozilla because it has no
document.all collection but other DOM standards compliant browsers do
(Opera 7, IceBrowser 5 and probably others). That would leave those
browsers attempting to use the select.add function in an IE style when
there is every chance that they actually implement the DOM standard
version.

It is a common cross browser scripting error to test one feature of a
browser and then make assumptions about other features based on the
result of that test.

Richard.

 

[Joe Kelsey]

Your - if(document.all) - test is OK on Mozilla because it has no
document.all collection but other DOM standards compliant browsers do
(Opera 7, IceBrowser 5 and probably others). That would leave those
browsers attempting to use the select.add function in an IE style when
there is every chance that they actually implement the DOM standard
version.

So, do you have a suggestion for a technique to detect the
invalid/non-standard implementation of select.add by IE? Aside from
including some sort of enormous class which reliably detects all
browsers and versions. The given document.all test works quickly but
unreliably. Please suggest a test which works quickly and reliably.

If a particular browser wants to emulate all of the non-standard
behavior of IE, then it needs to emulate *all* of the non-standard
behavior. Opera and whatever else who implement the non-sstandard
document.all need to also implement the non-standard select.add in
order to operate reliably as a quirk-for-quirk replacement for IE.

/Joe

 

[Lasse Reichstein Nielsen]

So, do you have a suggestion for a technique to detect the
invalid/non-standard implementation of select.add by IE?

Just detect IE. That is very simple using IE conditional comments:

<script type="text/javascript">
var isIE = false;
</script>
<!--[if IE]>
<script type="text/javascript">
isIE = true;
</script>

Aside from including some sort of enormous class which reliably
detects all browsers and versions.

You only ever need to detect the browsers that you *know* that you
need to make exceptions for. Build to standards, make exceptions
for those browsers that don't follow standards. Then unknown browsers
will at least get a chance if they are standards compliant.

The given document.all test works quickly but unreliably. Please
suggest a test which works quickly and reliably.

See above. Detects IE 4+ with absolute certainty and is quite fast.

If a particular browser wants to emulate all of the non-standard
behavior of IE, then it needs to emulate *all* of the non-standard
behavior.

Say who? You?

It's not that they *want* to emulate non-standard behavior. It's just
that people want even badly broken pages to be visible and functional.
To get a larger user base, they implement as little non-standard
behavior as necessary to get sufficiently many broken pages to work.
They will never go for complete bug-by-bug compatability, and they
shouldn't.

You shouldn't use the existence of one non-standard functionality
to infer *anything* about another non-standard functionality.

In a perfect world, they wouldn't need any non-standard behavior, and
they would be happy not to have to waste manpower implementing it.

Opera and whatever else who implement the non-sstandard
document.all need to also implement the non-standard select.add in
order to operate reliably as a quirk-for-quirk replacement for IE.

They don't *want* to be as bad as IE. Apparently, sufficiently many
pages use the non-standard select.add, so Opera Software has
implemented it. I.e., they have done as you demand.


Personally, I would let any DOM implementation allow "undefined"
anywhere the specification asks for "null". The specification is
written for strongly typed languages, and uses "null" for an
non-defined object value. Javascript typically uses "undefined" for
non-specified values (e.g., in functions with optional arguments).

Mozilla has chosen not to do this. They don't have to.

/L

 

[Joe Kelsey]

You are asking that all browsers conform to your expectations so that
you can write code based on your assumptions about browsers. That is
unrealistic, and even if the browser manufactures attempted it they
would still fail to match IE bug for bug. They would either not know
about all IE bugs (some will be undocumented) and would inevitably
introduce their own.

I refuse to use emoticons.

If you cannot distinguish "tilting at windmills" from the rest of the
text, then I guess you just have to somehow survive.

/Joe