如何在 JavaScript 中使用 document.head？

在本教程中，我們將討論如何在 JavaScript 中使用文件的頭部。

document.head 屬性是 DOM 3 級只讀特性。document.head 屬性返回文件中的所有 head 標籤。如果不存在 head 標籤，HTML 會新增一個空的 head 標籤。如果有多個 head 元素，該屬性將返回第一個 head 元素。

head 標籤包含文件的頭部資訊，例如標題、關鍵詞、描述和樣式表。每個文件都需要一個 head 標籤，但是開始和結束標籤是可選的。如果忘記關閉 head 標籤，則第一個 body 標籤或第一個 frameset 標籤將成為 head 標籤的結束。

在 HTML 4 Strict 和 Transitional 文件中，body 標籤位於 head 標籤之後。在 HTML 4 Frameset 文件中，frameset 元素位於 head 元素之後。

head 標籤中的資料不會渲染，只有 title 標籤中的資料會渲染。head 標籤有一個可選屬性名為 profile。profile 屬性指定元資料的地址。

使用 document.head 屬性

讓我們學習如何使用 head 的屬性。

head 標籤可以包含 base、bgsound、link、meta、script、style 和 title 元素。

根據瀏覽器不同，head 標籤可能具有以下屬性：

all
attributes
baseURI
behaviorUrns
canHaveChildren
canHaveHTML
childElementCount
childNodes
children
className
currentStyle
dir
firstChild
firstElementChild
id innerHTML
innerText
isContentEditable
isDisabled
isMultiLine
isTextEdit
lang
lastChild
lastElementChild
localName
name
namespaceURI
nextElementSibling
nextSibling
nodeName nodeType
nodeValue
outerHTML
outerText
ownerDocument
parentElement
parentNode
parentTextEdit
previousElementSibling
previousSibling
profile
readyState
runtimeStyle
scopeName
style
tagName
tagUrn
textContent
uniqueID

使用者可以按照以下語法來使用 head 的屬性。

語法

let headTag = document.head;
headTag.propertyName;

以上語法返回 head 節點及其屬性。

返回值

head 屬性返回 HTML head 節點和屬性值。

示例

在這個程式中，我們嘗試訪問 head 元素的所有屬性。

瀏覽器不支援某些屬性。某些屬性需要一些 HTML 操作才能返回屬性值。對於這些屬性，使用者將得到“undefined”輸出。其他屬性將返回其值。您可以嘗試新增必要的 DOM 元素。


<html>
<head name="docHeadName" id="docHeadId">
   <title>Title</title>
   <base href="http://www.test.com/" />
</head>
<body>
   <h2> Working with the document head's properties </h2>
   <div id="docHeadBtnWrap">
      <button id="docHeadBtn">Run</button>
   </div>
   <p id="docHeadOut"></p>
   <script>
      var docHeadInp = document.getElementById("docHeadInp");
      var docHeadOut = document.getElementById("docHeadOut");
      var docHeadBtnWrap = document.getElementById("docHeadBtnWrap");
      var docHeadBtn = document.getElementById("docHeadBtn");
      var docHeadInpStr = "";
      docHeadBtn.onclick = function() {
         docHeadInpStr = "";
         let docHeadNode = document.head;
         
         //docHeadBtnWrap.style.display = "none";
         docHeadInpStr += "<br><br><b>all= </b>" + docHeadNode.all
         docHeadInpStr += "<br><br><b>attributes= </b>" + docHeadNode.attributes
         docHeadInpStr += "<br><br><b>baseURI= </b>" + docHeadNode.baseURI
         docHeadInpStr += "<br><br><b>behaviorUrns= </b>" + docHeadNode.behaviorUrns
         docHeadInpStr += "<br><br><b>canHaveChildren= </b>" + docHeadNode.canHaveChildren
         docHeadInpStr += "<br><br><b>canHaveHTML= </b>" + docHeadNode.canHaveHTML
         docHeadInpStr += "<br><br><b>childElementCount= </b>" + docHeadNode.childElementCount
         docHeadInpStr += "<br><br><b>childNodes= </b>" + docHeadNode.childNodes
         docHeadInpStr += "<br><br><b>children= </b>" + docHeadNode.children
         docHeadInpStr += "<br><br><b>className= </b>" + docHeadNode.className
         docHeadInpStr += "<br><br><b>currentStyle= </b>" + docHeadNode.currentStyle
         docHeadInpStr += "<br><br><b>dir= </b>" + docHeadNode.dir
         docHeadInpStr += "<br><br><b>firstChild= </b>" + docHeadNode.firstChild
         docHeadInpStr += "<br><br><b>firstElementChild= </b>" + docHeadNode.firstElementChild
         docHeadInpStr += "<br><br><b>id= </b>" + docHeadNode.id
         docHeadInpStr += "<br><br><b>innerHTML= </b>" + docHeadNode.innerHTML
         docHeadInpStr += "<br><br><b>innerText= </b>" + docHeadNode.innerText
         docHeadInpStr += "<br><br><b>isContentEditable= </b>" + docHeadNode.isContentEditable
         docHeadInpStr += "<br><br><b>isDisabled= </b>" + docHeadNode.isDisabled
         docHeadInpStr += "<br><br><b>isMultiLine= </b>" + docHeadNode.isMultiLine
         docHeadInpStr += "<br><br><b>isTextEdit= </b>" + docHeadNode.isTextEdit
         docHeadInpStr += "<br><br><b>lang= </b>" + docHeadNode.lang
         docHeadInpStr += "<br><br><b>lastChild= </b>" + docHeadNode.lastChild
         docHeadInpStr += "<br><br><b>lastElementChild= </b>" + docHeadNode.lastElementChild
         docHeadInpStr += "<br><br><b>localName= </b>" + docHeadNode.localName
         docHeadInpStr += "<br><br><b>name= </b>" + docHeadNode.name
         docHeadInpStr += "<br><br><b>namespaceURI= </b>" + docHeadNode.namespaceURI
         docHeadInpStr += "<br><br><b>nextElementSibling= </b>" + docHeadNode.nextElementSibling
         docHeadInpStr += "<br><br><b>nextSibling= </b>" + docHeadNode.nextSibling
         docHeadInpStr += "<br><br><b>nodeName= </b>" + docHeadNode.nodeName
         docHeadInpStr += "<br><br><b>nodeType= </b>" + docHeadNode.nodeType
         docHeadInpStr += "<br><br><b>nodeValue= </b>" + docHeadNode.nodeValue
         docHeadInpStr += "<br><br><b>outerHTML= </b>" + docHeadNode.outerHTML
         docHeadInpStr += "<br><br><b>outerText= </b>" + docHeadNode.outerText
         docHeadInpStr += "<br><br><b>ownerDocument= </b>" + docHeadNode.ownerDocument
         docHeadInpStr += "<br><br><b>parentElement= </b>" + docHeadNode.parentElement
         docHeadInpStr += "<br><br><b>parentNode= </b>" + docHeadNode.parentNode
         docHeadInpStr += "<br><br><b>parentTextEdit= </b>" + docHeadNode.parentTextEdit
         docHeadInpStr += "<br><br><b>previousElementSibling= </b>" + docHeadNode.previousElementSibling
         docHeadInpStr += "<br><br><b>previousSibling= </b>" + docHeadNode.previousSibling
         docHeadInpStr += "<br><br><b>profile= </b>" + docHeadNode.profile
         docHeadInpStr += "<br><br><b>readyState= </b>" + docHeadNode.readyState
         docHeadInpStr += "<br><br><b>runtimeStyle= </b>" + docHeadNode.runtimeStyle
         docHeadInpStr += "<br><br><b>scopeName= </b>" + docHeadNode.scopeName
         docHeadInpStr += "<br><br><b>style= </b>" + docHeadNode.style
         docHeadInpStr += "<br><br><b>tagName= </b>" + docHeadNode.tagName
         docHeadInpStr += "<br><br><b>tagUrn= </b>" + docHeadNode.tagUrn
         docHeadInpStr += "<br><br><b>textContent </b>" + docHeadNode.textContent
         docHeadInpStr += "<br><br><b>uniqueID= </b>" + docHeadNode.uniqueID
         docHeadInpStr += "<br><br><br><b>Style properties: </b>"
         docHeadInpStr += "<br><br><br><b>behavior= </b>" + docHeadNode.behavior
         docHeadInpStr += "<br><br><b>cssText= </b>" + docHeadNode.cssText
         docHeadInpStr += "<br><br><b>hasLayout= </b>" + docHeadNode.hasLayout
         docHeadInpStr += "<br><br><b>length= </b>" + docHeadNode.length
         docHeadInpStr += "<br><br><b>pixelBottom= </b>" + docHeadNode.pixelBottom
         docHeadInpStr += "<br><br><b>pixelHeight= </b>" + docHeadNode.pixelHeight
         docHeadInpStr += "<br><br><b>pixelLeft= </b>" + docHeadNode.pixelLeft
         docHeadInpStr += "<br><br><b>pixelRight= </b>" + docHeadNode.pixelRight
         docHeadInpStr += "<br><br><b>pixelTop= </b>" + docHeadNode.pixelTop
         docHeadInpStr += "<br><br><b>pixelWidth= </b>" + docHeadNode.pixelWidth
         docHeadInpStr += "<br><br><b>posBottom= </b>" + docHeadNode.posBottom
         docHeadInpStr += "<br><br><b>posHeight= </b>" + docHeadNode.posHeight
         docHeadInpStr += "<br><br><b>posLeft= </b>" + docHeadNode.posLeft
         docHeadInpStr += "<br><br><b>posRight= </b>" + docHeadNode.posRight
         docHeadInpStr += "<br><br><b>posTop= </b>" + docHeadNode.posTop
         docHeadInpStr += "<br><br><b>posWidth= </b>" + docHeadNode.posWidth
         docHeadOut.innerHTML = docHeadInpStr;
      };
   </script>
</body>
</html>

使用 document.head 方法

讓我們學習如何使用 head 的方法。

根據瀏覽器不同，head 標籤可能具有以下方法：

addBehavior
addEventListener
appendChild
applyElement
attachment
clearAttributes
cloneNode
compareDocumentPosition
contains
detachment
dispatchEvent
fireEvent
getAdjacentText
getAttribute
getAttributeNode
getAttributeNodeNS
getAttributeNS
getElementsByClassName
getElementsByTagName
getElementsByTagName
getExpression
hasAttribute
hasAttributeNS
hasAttributes
hasChildNodes
insertAdjacentElement
insertAdjacentHTML
insertAdjacentText
insertBefore
isDefaultNamespace
isEqualNode
isSameNode
isSupported
mergeAttributes
normalize
querySelector
querySelectorAll
releaseCapture
removeAttribute
removeAttributeNode
removeAttributeNS
removeBehavior
removeChild
removeEventListener
setExpression
removeNode
replaceChild
replaceNode
setAttribute
setAttributeNode
setAttributeNodeNS
setAttributeNS
setCapture
setExpression
swapNode
onpropertychange
onreadystatechangeOccurs

使用者可以按照以下語法來使用 head 的方法。

語法

let headTag = document.head;
headTag.methodName = function(){
};

以上語法執行 head 標籤的方法。

示例

在這個程式中，我們嘗試訪問 head 元素的兩種方法。

瀏覽器不支援某些方法。某些方法需要一些 HTML 操作才能返回輸出。對於這些方法，使用者將得到“undefined”輸出。其他屬性將返回其值。您可以嘗試新增必要的 DOM 元素。


<html>
<head id="headMethId">
</head>
<body>
   <h2>Working with the document head's methods </h2>
   <div id="headMethBtnWrap">
      <button id="headMethBtn">Run</button>
   </div>
   <p id="headMethOut"></p>
   <script>
      var headMethInp = document.getElementById("headMethInp");
      var headMethOut = document.getElementById("headMethOut");
      var headMethBtnWrap = document.getElementById("headMethBtnWrap");
      var headMethBtn = document.getElementById("headMethBtn");
      var headMethInpStr = "";
      var headMethOut = document.getElementById("headMethOut");
      headMethBtn.onclick = function() {
         headMethInpStr = "";
         let headMethNode = document.head;
         
         //headMethBtnWrap.style.display = "none";
         headMethInpStr += "<br><br><b>hasAttribute('name') </b>" + headMethNode.hasAttribute('name');
         headMethInpStr += "<br><br><b>getAttribute('id') </b>" + headMethNode.getAttribute("id");
         headMethOut.innerHTML = headMethInpStr;
      };
   </script>
</body>
</html>

本教程教我們如何使用 head 標籤的屬性和方法。所有屬性和方法都是 JavaScript 內建的。

Shubham Vora

更新於：2022年11月15日

2K+ 瀏覽量

開啟你的職業生涯

完成課程獲得認證

開始學習

如何在 JavaScript 中使用 document.head？

使用 document.head 屬性

語法

返回值

示例

使用 document.head 方法

語法

示例

開啟你的 職業生涯

開啟你的職業生涯