Is a <head> element always available in the DOM, even if absent in the HTML markup?

Viewed 4785

Every browser I've observed creates a <head> element that's accessible in the DOM even if there are no explicit <head></head> tags in the document's markup.

However, Google Analytics uses the following code for dynamic script insertion:

(function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();

The following line:

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

seems to make a special concession for cases where a <head> element is not present.

Is this just a case of extreme backwards-compatibility (e.g., for Netscape 4, or the like), or is there a case to be made for not assuming that modern browsers (i.e., Internet Explorer 6 and more recent) will always have access to a <head> element in the DOM?

3 Answers

In fact, not all the browser automatically create <head></head> when the document is load. I mean not even on modern browser such as Chrome (Version: 9.0.597.102).

When you load an image directly to the browser, like for example:
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg,
the browser will only generate the <body> tag to contain the image and the <head> tag can not be found on the source code.

Google using this code:

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

We can not create <head> using document.createElement('head'): using that will get an error: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3".
Thus when there's no head tag, you cannot append anything to it. That's why google put the element into the <body> instead.

Related