JavaScript dot notation

Viewed 62769

The following line is apparently written best in dot notation. I am trying to clean my JavaScript code to make it strict. What does it mean?

if (ie||ns6)
{
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "";
}

I added some context to my line of code, in case this helps? I know nothing about DOM. I am not trying to support Internet Explorer 4, this is not my code and I wouldn't be able to write JavaScript myself. I am only trying to get it compliant and the JSLint tool says about this line:

Problem at line 17 character 43: ['dhtmltooltip'] is better written in dot notation.

9 Answers

There are two ways to access properties of an object in JavaScript.

Dot notation

foo.bar.baz

Square bracket notation

foo['bar']['baz']

You are using the latter in part of your code.

Douglas Crockford, who wrote JSLint (a tool which gives that error message), is of the opinion that is is better to use dot notation where possible.

JSLint wants this:

var tipobj= document.all ? document.all.dhtmltooltip
                         : document.getElementById 
                           ? document.getElementById("dhtmltooltip") 
                           : "";

But nowadays is completely safe to assume that document.getElementById exists, it was introduced on the DOM Level Core 2 as of year 2000.

document.all is dead, unless you try to support really old browsers like IE4 (12 year old!):

var tipobj = document.getElementById("dhtmltooltip");

The two above snippets are a good example about the complexity cost of supporting very old browser versions:

alt text

The following seems to be more user-friendly.

var tipobj;
if (document.all)
    tipobj = document.all["dhtmltooltip"];
else if (document.getElementById)
    tipobj = document.getElementById("dhtmltooltip");
else
    tipobj = "";

It's using capability checking to retrieve an element with the id dhtmltooltip and falling back to an empty String if there is not a capability for doing the retrieval.

UPDATE: As others have pointed out, the check for getElementById should be first, and could probably be omitted since any browser that could be called "modern" with a straight face has had it for a long time.

UPDATE 2: With the new context, JSLint is complaining that it isn't document.all.dhtmltooltip. You should probably just rewrite the whole thing as:

var tipobj = document.getElementById("dhtmltooltip");

and be done with it.

A quick Google search says that document.all is only used to support IE4. It is an array that allows the browser to access different parts of the DOM (see here.)

The code you posted first checks if document.all exists. If not, it sets tipobj to "". Now, beyond this, it's not really worth deciphering the line you posted unless you really want IE4 support. Since very few people still use IE4 and this piece of code isn't compliant to any modern standards, I'd just drop that line and set tipobj to "".

It looks like the only real issues are formatting/syntax. This should work exactly the same and conform to javascript best practice. The main difference is using javascript dot notation instead of bracket notation.

if (ie || ns6) {
    var tipobj = document.all ? document.all.dhtmltooltip : document.getElementById ? document.getElementById("dhtmltooltip") : "";
}
Related