Deeper into the Trenches

© 2011, Martin Rinehart

Tell me what's goin' on / I ain't got a clue.

That's Jimmy Buffett, Fruitcakes, 1994. If you haven't got it, get it. P.S. I wrote that three days ago. Japan was hit with 8.9 two days ago. "Shake and bake life with the quake / The secret's in the crust." Jimmy wrote that in Fruitcakes' title song.

Consider the following test code embedded in a custom code tester:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html> <body>

<a id=t href='/some/file.txt'> link </a>

<textarea id=ta rows=10 cols=80> </textarea>

<script type='text/JavaScript'>

    var ta = document.getElementById( 'ta' );

    ta.value = 'Test Results: \n';
    ta.value += '\n1: ' + document.getElementById('t');
    ta.value += '\n2: ' + typeof document.getElementById('t');
    ta.value += '\n3: ' + document.getElementById('t').constructor;
    ta.value += '\n3a: ' +
            document.getElementById('t').constructor.length;

    var weird = document.getElementById('t').constructor.prototype;

    ta.value += '\n4: ' + weird;
    ta.value += '\n4a: ' + weird.length;
    ta.value += '\n5: ' + typeof weird;

</script>

</body> </html>

The Test Results

Now let's consider the results, alphabetically, for Chrome, Firefox, MSIE, Opera and Safari.

1: What Is the Thing?

Each browser reports something like file://path/name.ext. Minor variations (one, two or three slashes after "file:") don't bother me. But what is it? That string is the content of the href attribute, sort of.

2: What Is the typeof the Thing?

Each browser reports object. This is as helpful as always.

3: Who Made It?

JavaScript's version of DNA testing starts with the constructor. Asking for the constructor has all browsers agreed that this has something to do with an HTMLAnchorElement (hereinafter, HAE). Specifically we get these answers (alpha order, respectively):, "function HAE() { [native code] }", "[object HAE]", "[object HAE]", "function HAE() { [native code] }" and "[object HAEConstructor]".

I wondered if the outer "[]" (FF, IE, Sa) meant anything. Were these really arrays? length was "0" in Ch and Op, "undefined" in the others.

4: From What Does It Inherit?

Finally, some more agreement! Ch, FF and Sa die on an error when we ask about the constructor's prototype. It's a TypeError in Ch and Sa (both use the Webkit engine), an internal-only error in FF. IE and Op invent their own internal prototype object types.

Wait a minute. Constructors without prototype properties? How many people have written that all JavaScript objects inherit, eventually, from Object? (Most worrying: how many times have I written exactly that? As often as most, as a guess. Don't find, "But everyone else is wrong, too!" an acceptable excuse. Oh, [expletive deleted]!)

5: What Is the Constructor's Prototype?

Three browsers died before question 5. IE and Op agreed that the prototype was an object. This bit of DNA testing ends where it started and we've gone nowhere. Only progress I've made is to find out how wrong I've been about JavaScript inheritance going back to Object.

What's the Cross-Browser Answer?

I guess that depends on the cross-browser question. I originally went down this path because I wanted to hang some code on a mouseover event. Well, guess what? You can do that reliably in all five browsers. (Versions of IE before the latest (March, 2011) not tested.)

What have I learned? In addition to the fact that DOM objects may not inherit from Object, I've learned to never, ever, trust prototypal inheritance with DOM objects. They don't play nicely with others.

Feedback: MartinRinehart at gmail dot com

# # #