JavaScript DOM Document


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 is the root node of the DOM tree. It is the top-level container for all other nodes in the DOM tree.

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

Here is how it looks when you console.log the document object:

javascript DOM document

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 all the properties of the document object.

Example

// looping through all the document properties
// and displaying their values

for (var props in document) {
  console.log(props + ' => ' + document[props]);
}
Try It

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

Example

var newdocument = new Document();

for (var props in newdocument) {
  console.log(props + ' => ' + newdocument[props]);
}
Try It

List Of Document Object Properties

The document object has a number of properties that can be accessed through the document object.

Some of the useful properties of the document object are:

PropertyDescription
Document.bodyIt represents the <body> node of the current document
Document.domainIt represents the domain name of the current document
Document.formsIt represents the collection of all the forms in the current document
Document.doctypeIt returns Document Type Definition (DTD) of the current document
Document.doctypeURIIt returns the location (URL) of the current document
Document.headIt returns <head> element of the current document
Document.titleUsing it you can get/set the document title
Document.linksIt returns a list of all the hyperlinks in the current document
Document.imagesIt returns a list of all the images in the current document
Document.cookieIt returns a semicolon-separated list of the cookies for the document
Document.activeElementIt returns the element cursor is focusing to in the document
Document.baseURIIt returns the base URI of the document
Document.characterSetIt returns character encoding for the document
Document.charsetIt returns character encoding for the document

document body

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

Example

var Body = document.body;
console.log(Body.tagName);
Try It

Document doctype

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

Example

var doctypeObj = document.doctype;
console.log(doctypeObj.name);
Try It

Document doctypeURI

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

Example

var uri = document.documentURI;
console.log(uri);
Try It

Document head

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

Example

var head = document.head;
console.log(head.nodeName);
Try It

Document.title

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

Example

var docTitle = document.title;
console.log(docTitle);
document.title = "New title";
console.log(document.title)
Run the code

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

Example

var docLinks = document.links;
for (let i = 0; i < docLinks.length; i++) {
  console.log(docLinks[i].href)
}
Run the code

document images

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

Example

var docImages = document.images;
for (let i = 0; i < docImages.length; i++) {
  console.log(docImages[i].src)
}
Run the code

document cookie

The document.cookie is a document property that 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 detail about how to set and get cookies in javascript.

Example

var allCookies = document.cookie;
console.log(allCookies)
Run the code

Document activeElement

Example

Name: <input type="text" placeholder="Focus here">
<p id="output"></p>
<script>
  function myActiveElement() {
    var active = document.activeElement.tagName
    document.getElementById("output").innerHTML = active;
  }
</script>
Try It

document baseURI

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

Example

var baseuri = document.baseURI;
console.log(baseuri);
Try It

document characterSet

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

Example

var characterset = document.characterSet;
console.log(characterset);
Try It

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

Conclusion

In this tutorial, we learned about Javascript DOM document object what it is, how to use it, what are its properties and methods, and how to use them.