Mathias Bynens

The HTML5 document.head DOM tree accessor

· 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

Framp wrote on :

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

Simple is beautiful.

Raynos wrote on :

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

Curly braces are beautiful.

Adrusi wrote on :

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

Block scope is beautiful.

Lea Verou wrote on :

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 :

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.

MaxArt wrote on :

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.

Leave a comment

Comment on “The HTML5 document.head DOM tree accessor”

Some Markdown is allowed; HTML isn’t. Keyboard shortcuts are available.

It’s possible to add emphasis to text:

_Emphasize_ some terms. Perhaps you’d rather use **strong emphasis** instead?

Select some text and press + I on Mac or Ctrl + I on Windows to make it italic. For bold text, use + B or Ctrl + B.

To create links:

Here’s an inline link to [Google](http://www.google.com/).

If the link itself is not descriptive enough to tell users where they’re going, you might want to create a link with a title attribute, which will show up on hover:

Here’s a [poorly-named link](http://www.google.com/ "Google").

Use backticks (`) to create an inline <code> span:

In HTML, the `p` element represents a paragraph.

Select some inline text and press + K on Mac or Ctrl + K on Windows to make it a <code> span.

Indent four spaces to create an escaped <pre><code> block:

    printf("goodbye world!"); /* his suicide note
was in C */

Alternatively, you could use triple backtick syntax:

```
printf("goodbye world!"); /* his suicide note
was in C */
```

Select a block of text (more than one line) and press + K on Mac or Ctrl + K on Windows to make it a preformatted <code> block.

Quoting text can be done as follows:

> Lorem iPad dolor sit amet, consectetur Apple adipisicing elit,
> sed do eiusmod incididunt ut labore et dolore magna aliqua Shenzhen.
> Ut enim ad minim veniam, quis nostrud no multi-tasking ullamco laboris
> nisi ut aliquip iPad ex ea commodo consequat.

Select a block of text and press + E on Mac or Ctrl + E on Windows to make it a <blockquote>.