Tutorials Tonight's Logo


What is Document in Javascript?

The Document is an interface that represents the web pages. It serves as an entry point into the content of web pages i.e DOM Tree.

The document includes everything about the webpage both which is visible and which is not visible on the screen. In other word document is the owner of all the node objects in the webpage.

A large amount of information about the webpage is available with the document, which can be accessed by a few methods and properties provided by the document object.

To access any information related to the document you will have to start accessing through the document.

HTML document implements HTMLDocument interface while XML and SVG documents implements XMLDocument interface.

The example below shows rough information about the document object.

for (var props in document) {
  console.log(props + '=' + document[props]);
▶ Run the code

Document Constructor

Javascript provides a Constructor for creating documents. The Document constructor is used to create a new document object that is a web page loaded in the browser. Example: new Document()

var newdocument = new Document();

for (var props in newdocument) {
  console.log(props + '=' + newdocument[props]);
▶ Run the code

Document Object Properties

The document object has a bunch of properties which you can use to get information about the document.

Some of the useful properties are listed below.

Property Description
Document.body It represents the <body> node of the current document
Document.doctype It returns Document Type Definition (DTD) of the current document
Document.doctypeURI It returns location (URL) of the current document
Document.head It returns <head> element of the current document
Document.title Using it you can get/set document title
Document.links It returns a list of all the hyperlinks in the current document
Document.images It returns a list of all the images in the current document
Document.cookie It returns semicolon-separated list of the cookies for the document
Document.activeElement It returns element cursor is focusing to in document
Document.baseURI It returns base URI of the document
Document.characterSet It returns character encoding for the document

document body

document.body returns body object of the the document and returns null if no such element exists.

const Body = document.body;
▶ Run the code

Document doctype

It returns an object which contains information about Document Type Declaration (DTD).

const doctypeObj = document.doctype;
▶ Run the code

Document doctypeURI

It is a read-only property which returns URL of the current document in form of string.

const uri = document.documentURI;
▶ Run the code

Document head

It is a read-only property which returns <head> element of the current document.

const head = document.head;
▶ Run the code


Using document.title you can get the title of the document and can also set a new title.

const docTitle = document.title;
document.title = "New title";
▶ Run the code

document.links returns a collection of all <area> element and <a> elements in a document.

const docLinks = document.links;
for (let i = 0; i < docLinks.length; i++) {
▶ Run the code

document images

document.images returns a collection of all <img> element.

const docImages = document.images;
for (let i = 0; i < docImages.length; i++) {
▶ Run the code

document cookie

The document.cookie is a document property which let you read and write cookies associated with the document.

For the actual value of the cookies, it serves as a getter and setter. Learn in details about how to set and get cookies in javascript.

const allCookies = document.cookie;
▶ Run the code

Document activeElement

Name: <input type="text" placeholder="Focus here">
<p id="output"></p>
  function myActiveElement() {
    var active = document.activeElement.tagName
    document.getElementById("output").innerHTML = active;
▶ Run the code



document baseURI

The baseURI property of document returns the base URI of the HTML document.

const baseuri = document.baseURI;
▶ Run the code

document characterSet

The document.characterSet is a read-only property which returns character encoding of the current document.

const characterset = document.characterSet;
▶ Run the code

In the coming chapters, you will see more dom methods for different purposes.

Javascript DOM Methods
Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.