Является ли элемент <head> всегда доступным в DOM, даже если он отсутствует в разметке HTML?

Каждый браузер, который я наблюдал, создает элемент <head>, доступный в DOM, даже если в разметке документа нет явных тегов <head></head>.

Однако Google Analytics использует следующий код для динамической script вставки:

(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);
})();

Следующая строка:

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

кажется, делает специальную концессию для случаев, когда элемент <head> отсутствует.

Является ли это просто экстремальной обратной совместимостью (например, для Netscape 4 и т.д.), или есть ли случай, когда вы не предполагаете, что современные браузеры (то есть Internet Explorer 6 и более поздние) будут всегда есть доступ к элементу <head> в DOM?

ОТВЕТЫ

Ответ 1

Современные браузеры при необходимости создают элемент головы для вас.

Но если предположить, что клиент сделает это, это не очень удобно, если вы хотите, чтобы ваш код был пуленепробиваемым. Так что Гуглеры консервативны и безопасны.

Дополнительное предложение в их заявлении является минимальным, но добавляет дополнительную надежность. Так что это хорошо.

ps Хорошая работа над вопросом и вытаскивание соответствующего кода.

Добавлено:

HTML-спецификация говорит, что главный тег является необязательным. Я не думаю, что создание броузером "элемента" головы в доме требуется спецификацией. Google не хочет (и не должен) рассчитывать на то, что он там.

Ответ 2

Фактически, не все браузер автоматически создает <head></head>, когда документ загружается. Я имею в виду даже не в современном браузере, таком как Chrome (версия: 9.0.597.102).

Когда вы загружаете изображение непосредственно в браузер, например, например:
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg,
браузер будет генерировать только тег <body>, чтобы содержать изображение, а тег <head> не может быть найден в исходном коде.

Google использует этот код:

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

Мы не можем создать <head> с помощью document.createElement('head'): при этом получится ошибка: "Error: HIERARCHY_REQUEST_ERR: DOM Exception 3".
Таким образом, когда нет метки заголовка, вы не можете ничего добавить к ней. Вот почему google помещает элемент в <body> вместо этого.

Ответ 3

Не указано, что элемент "head" всегда будет присутствовать, он обычно зависит от браузеров и документа DOCTYPE. Для обсуждения и нескольких тестов на этом см.:

http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/

Следующее позаботится о многих причудах, и это кратчайший многоразовый код для загрузки общих сценариев (включая GA и т.п.):

function require(src) {
  var s, d = document, r = d.documentElement;
  (s = d.createElement('script')).src = src;
  r.removeChild(r.insertBefore(s, r.firstChild));
}

require(('https:' == document.location.protocol ?
  'https://ssl' : 'http://www') +
  '.google-analytics.com/ga.js');

здесь script также удаляется из документа (после загрузки/выполнения), но это только личный вкус, при необходимости можно пропустить "removeChild". Нет никакой разницы в поведении, удаляя его или оставляя его на месте.