The HTML5 `document.head` DOM tree accessor

Published 4th May 2010 · tagged with HTML, JavaScript

One of the lesser known HTML5 JavaScript goodies is the document.head DOM tree accessor, which is a more efficient (and easier to type) alternative to document.getElementsByTagName('head')[0].

The head element of a document is the first head element that is a child of the html element, if there is one, or null otherwise. The head attribute, on getting, must return the head element of the document (a head element or null).

Native support for document.head is very easy to detect:

if (document.getElementsByTagName('head')[0] === document.head) {
	// Native support
}

Emulating it is also very straightforward. Just put the following snippet in your JavaScript code:

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

If you don’t care about JSLint booing at your code, you could also do this instead (which is slightly more efficient):

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

After that, go ahead and use document.head all you want :)

Comments

Paul Irish wrote on 3rd October 2010 at 17:58:

If you wanna be even more efficient:

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

Mathias wrote on 4th October 2010 at 10:25:

Paul Irish: Nice! Too bad JSLint complains about it:

Problem at line 1 character 75: Expected an assignment or function call and instead saw an expression.

Framp wrote on 16th March 2011 at 16:29:

if (!document.head)
   document.head = document.getElementsByTagName('head')[0];

Simple is beautiful.

Raynos wrote on 14th May 2011 at 19:11:

if (!document.head) {
  document.head = document.getElementsByTagName("head")[0];
}

Curly braces are beautiful.

Adrusi wrote on 1st June 2011 at 05:59:

if (!document.head) (function() {
  document.head = document.getElementsByTagName("head")[0];
}());

Block scope is beautiful.

Federico wrote on 17th July 2011 at 23:15:

Adrusi: How is that even needed? Care to help us understand (via links, search keywords, etc.)?

Lea Verou wrote on 25th July 2011 at 21:00:

The problem with these polyfills is that on new iframes document.head still won’t exist, so they’re imperfect. Not sure how to solve that in a sensible manner though, but I’d really like to see a document.head polyfill one can really rely on.

Mathias wrote on 25th July 2011 at 21:10:

Lea: That’s a fair point.

Personally I’m fine with just using the above snippet (it’s not really a polyfill in the strict sense of the word) once for every frame I need it for. Most of the time I need a reference to the <head> element in a given document, I end up caching it like this:

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

It’s so small and fast it doesn’t really hurt to repeat it for a different frame when needed.

Matt wrote on 26th September 2011 at 18:52:

Federico: Block scope is completely pointless in that case. There's nothing to be scoped.

Adam wrote on 3rd October 2011 at 06:59:

Doesn’t seem to work anymore in Chrome 14. It just says “Uncaught ReferenceError: Invalid left-hand side in assignment” in the console. This works, however:

document.head = typeof document.head != "object" ? document.getElementsByTagName("head")[0] : document.head;

Tested and works in the latest WebKit/Gecko/Opera. Here’s the output from testing IE 5.5 to 10, Chrome 14 and iPad Safari 4.3.1 in Tutti.

Ad@m

Mathias wrote on 3rd October 2011 at 07:28:

Adam: What doesn’t work? I can’t reproduce any issues with the code in the blog post.

MaxArt wrote on 13th March 2013 at 09:48:

JSLint is a disgrace for all the JavaScript code artists.

It just doesn’t understand the power of JavaScript’s syntax.

Paul’s solution is the kind that I usually adopt.

Mathias Bynens

The HTML5 `document.head` DOM tree accessor

Comments

Leave a comment