Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
javascript
frontend
htmlversion

What is the document.doctype property in DOM?

Abdul Muizz

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

In this Answer, we explore DOM's document.doctype property. This property provides the doctype of HTML documents. The DocumentType object provides access to HTML documents' data. This object acts as an interface for the elements inside an HTML page.

Note: The doctype attribute specifies the version of HTML used in a web page and is either null or takes the value of the DocumentType object.

Syntax

The syntax of this property is as follows:


document.doctype

Here, the document object refers to the HTML page loaded in the browser.

Return value

The property returns a DocumentType object. Its name attribute specifies the HTML version of the web page.

Note: The document.doctype property is for read-only purposes.

Code

The code example below illustrates how we can use the document.doctype property to detect the HTML version of our web page:

Explanation

  • Line 1: We define the version of HTML used in our web page through the use of <!DOCTYPE> keyword.
  • Lines 6–10: We see a parent <div> that encloses the HTML content of our webpage. The HTML elements that we use to address our problem statement are as follows:
    • Line 8: This line renders an HTML <button> that listens to the onclick event and triggers the getDoctype() method.
    • Line 9: We have a placeholder <p> tag that displays the HTML version of our web page using the document.doctype property after the reader clicks on the <button> present on line 8.
  • Lines 11–18: This is the getDoctype() method enclosed within the HTML <script> tags. The body of the method comprises of the statements below:
    • Line 13: We use the document.doctype property and assign its return value to the doctypeVersion variable.
    • Lines 14–15: We fetch the placeholder <p> tag using the document.getElementById() method. Then, we use the innerHTML property to render the version of our HTML page as seen in the output tab above.

To read more on the document.getElementById() method and the innerHTML property, please refer to the following links:

RELATED TAGS

html
javascript
frontend
htmlversion

CONTRIBUTOR

Abdul Muizz
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring