document.head v. document.getElementsByTagName(“head”)[0]

Question

What is the difference between using document.head and using document.getElementsByTagName(\"head\")[0]? Tests I ran showed that they both take about a

Answer 1

Just convenience because you are only supposed to have one per page. Just like there is a direct shortcut to document.body, although document.body is standard and you wouldn't need the fallback.

document.body || document.getElementsByTagName("body")[0]

I wouldn't use document.head unless you only support IE9+. Until then, I would stick to document.getElementsByTagName("head")[0]

If you want a version that you don't have to change as time goes by, you can do the following at the top of your script

document.head = document.head || document.getElementsByTagName("head")[0];

That way you can just change that one place when you drop support for IE8 (or may even leave it there since it doesn't hurt, but it will be dead code). The above code would also make sure you only query the DOM once

Answer 2

Using the || operator like that is a form of feature detection. When used, if the first value is undefined it sends back the latter value.

So for

document.head || document.getElementsByTagName("head")[0];

the reason is that if document.head is not supported at least the right value is returned.

As for your speed test, a millisecond is a long time. I doubt it really took that long. In fact, I made a jsPerf for this. It shows that the getElementsByTagName function is roughly 80% slower.

Answer 3

This is more of a convenience matter than a performance one (though document.head should have a negligible benefit). Use which ever you like, or, use one as a fallback to the other (as your example code does). Having the fallback is wise, since document.head is not support in IE 6-8.

It's not likely that getElementsByTagName will soon be deprecated, so this isn't a great example of when it's good to provide a fallback. You could safely use the more verbose route on its own and enjoy support on into the future.

Better examples of these types of things would be events, and how they're passed around in modern browsers, compared to older browsers. It is not uncommon to see something like this:

function callback (event) {
    var id = (event || window.event).target.id;
}

In this case though, the window.event portion is necessary for legacy support. If the event object is undefined, we assume the event is a member on the window object. As browsers mature, window.event ceases to be a thing, and these tests unanimously return event.target.id instead.

Again, your case is a bit different as getElementsByTagName will likely never be deprecated or vanish as window.event did.

Answer 4

According to MDN, document.head only gained support in IE 9, so using the other method as a fallback protects you from browser incompatibilities