如何在 JavaScript 中使用 document.head？

在本教程中，我们将讨论如何在 JavaScript 中使用文档的头部。

document head 属性是 DOM 3 级只读特性。文档的 head 属性返回文档中的所有 head 标签。如果不存在 head 标签，HTML 会添加一个空的 head 标签。如果有多个 head 元素，该属性将返回第一个 head 元素。

head 标签包含文档头部信息，例如标题、关键字、描述和样式表。每个文档都需要一个 head 标签。但开始和结束标签是可选的。如果我们忘记关闭 head 标签，第一个 body 标签或第一个 frameset 标签将成为 head 标签的结束。

在 HTML 4 严格和过渡文档中，body 标签位于 head 标签之后。在 HTML 4 框架集文档中，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 方法

语法

示例

启动您的 职业生涯

启动您的职业生涯