How to work with document.head in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, let us discuss how to work with the document's head in JavaScript.

The document head property is a dom level 3 read-only feature. The document's head property returns all the head tags in the document. HTML adds an empty head tag in case it is not present. The property returns the first head element in case there are many.

The head tag contains the document header information like title, keywords, description, and style sheet. Every document needs a head tag. But start and end tags are optional. The first body tag or the first frameset tag becomes the end of the head tag in case we forget to close the head tag.

The body tag follows the head tag in HTML 4 Strict and Transitional documents. In HTML 4 Frameset documents, a frameset element follows the head element.

The head tag data does not render. Only the title tag data renders. The head tag has an optional attribute named profile. The profile attribute gives metadata's location.

Working with document.head properties

Let us learn to work with a head's properties.

The head tag can contain the elements base, bgsound, link, meta, script, style, and title.

The head tag may have the following properties based on the browser.

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

Users can follow the syntax below to work with the head's properties.

Syntax

let headTag = document.head;
headTag.propertyName;

The above syntax returns the head node and properties.

Return Value

The head property returns the HTML head node and property value.

Example

In this program, we try to access all the properties of the head element.

The browser does not support some properties. Some properties need some HTML manipulation to return the property value. The user gets "undefined" output for these. Other properties return the value. You can give it a try by adding necessary DOM elements.


<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>

Working with document.head methods

Let us learn to work with a head's methods.

The head tag may have the following methods based on the browser.

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

Users can follow the syntax below to work with the head's methods.

Syntax

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

The above syntax executes a head tag method.

Example

In this program, we try to access two methods of the head element.

The browser does not support some methods. Some methods need some HTML manipulation to return the output. The user gets "undefined" output for these. Other properties return the value. You can give it a try by adding necessary DOM elements.


<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>

This tutorial taught us to work with a head tag's properties and methods. All the properties and methods are built-in by JavaScript.

Shubham Vora

Updated on: 15-Nov-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started