DOM中始終有一個<head>元素，即使缺少HTML標記也是如此。

我觀察過的每個瀏覽器都會創建一個<head>元素，即使在文檔的標記中沒有明確的<head></head>標記，也可以在DOM中訪問該元素。DOM中始終有一個<head>元素，即使缺少HTML標記也是如此。

然而，谷歌Analytics使用動態腳本插入下面的代碼：

(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和更新的版本）的情況下，將始終有權訪問DOM中的<head>元素？

來源

2010-08-29 Bungle

IE6甚至IE5.5添加一個HEAD元素，如果不存在，其他瀏覽器如Safari <= 4不會，也可能是一些舊的Opera版本IIRC。 – CMS 2010-08-29 05:26:09

謝謝，CMS！ IE 6已經有很長一段時間了，但我已經習慣了瀏覽器自動添加''。 – Bungle 2010-08-29 23:00:15

現代瀏覽器在需要時爲您創建頭元素。

但是，假設客戶端這樣做並不聰明，如果你想要你的代碼是防彈的。所以Google員工正在保守和安全。

他們聲明中的額外條款是最低限度的，但增加了額外的可靠性。所以這是一件好事。

ps在這個問題上做得很好，並提出相關的代碼。

補充：

的HTML spec說，頭標記是可選的。我不認爲瀏覽器在規範中需要創建頭部「元素」。 Google不希望（也不應該）指望它在那裏。

來源

2010-08-29 05:13:31

HTML 4.01規範說明頭*元素*是必需的。只有*標籤*是可選的。請參閱http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-HTML。當然，瀏覽器通常不遵循規範，並且如果它們始終自動地創建head元素，那將是因爲大量的真實世界網頁在不這樣做的瀏覽器中中斷。 – Alohci 2010-08-29 10:10:21

@Alochi - 謝謝你的參考。我已經更新了答案。 – 2010-08-29 14:50:01

很好的答案！非常感謝您的幫助。 @Alohci：謝謝你的額外投入 - 這很有道理。 – Bungle 2010-08-29 22:58:32

實際上，並非所有的瀏覽器都在文件加載時自動創建<head></head>。我的意思是即使在現代瀏覽器，如Chrome（版本：9.0.597.102）。

當直接加載圖像給瀏覽器，例如像：
http://www.stylesight.com/assets/external/home_carousel/en/materials_ss12_m.jpg，
瀏覽器將只生成<body>標記以包含圖像和<head>標籤不能在源代碼中找到。

谷歌使用此代碼：

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

<head>使用document.createElement('head')我們不能創建：使用將得到一個錯誤："Error: HIERARCHY_REQUEST_ERR: DOM Exception 3"。
因此，當沒有頭標籤時，不能附加任何東西。這就是爲什麼谷歌把元素放入<body>的原因。

來源

2011-02-15 14:57:26 user373707

+1請問您可以添加一個對無法動態創建'head'標籤的聲明的引用？ – GitaarLAB 2014-08-19 19:15:42

@GitaarLAB：'「錯誤：HIERARCHY_REQUEST_ERR：DOM例外3」是一個參考，假設它是從瀏覽器控制檯複製的。儘管指出*哪個*瀏覽器會生成這將很好。 – slebetman 2014-08-19 19:41:38

@slebetman：的確，我的意思是說：哪些瀏覽器會拋出這個問題，以及哪些（權威的）在線資源來「記錄」這一點。 – GitaarLAB 2014-08-19 20:22:21

沒有給出「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');

這裏的腳本也從文檔中刪除（加載/執行後），但這只是個人的品味，如果需要，可以跳過「removeChild」。通過刪除它或將其留在原地沒有任何區別。

來源

2013-01-20 12:45:46

DOM中始終有一個<head>元素，即使缺少HTML標記也是如此。

回答

相關問題