The document type is the document object which represents entire HTML page and can be accessed globally. Through document object all the elements of the webpage can be accessed and manipulated. The document is a part of window object and can be accessed as window.document also. The document type has following characteristics:

  • nodeType – 9
  • nodeName – #document
  • nodeValue – null
  • parentnode –null
  • childNode – DocumentType (maximum of one), Element (maximum of one), ProcessingInstruction or Comment.

The document type has below mentioned properties and methods:

Properties of document type

Properties of document type

Name

Description

Usage

documentElement

The children of <i>Document</i> node can be accessed by documentElement. The document.documentElement represents <html> itself.

var html = document.documentElement;

This is same as :

var html = document.childNodes[0]; or

var html = document.firstChild;

 

body

This property points to <body> element. This is supported in most of the browsers and developers use it often in scripts.

// This sets all contents of body with newContents

document.body = newSettings;

 

// returns <body> of the current document.

var x = document.body;

doctype

This returns the Document Type Description, <!DOCTYPE> tag of the document. Name of the Document Type is returned. If document does not have <Doctype> it returns null. This is not supported in versions of IE < 8.

var name = document.doctype.name;

 

title

Sets or returns <title> element of the document. By setting <title> changes the title of the webpage.

//Returns title of the document.

var t = document.title;

 

//Sets title

document.title = “Tutorial on Javascript”;

URL

This property returns URL of the page including protocol like http://.

var x = document.URL;

//Output: http://www.google.com

referrer

Gives the URL which referenced this page. It returns null if there is no referrer.

var x = document.referrer;

 

domain

Returns domain name of the server that loaded the page.

var x = document.domain;

document.domain = www.google.com;

form

Returns all form elements collection of the document.

 

length – returns number of <form> elements in the collection

 

[index] – Returns <form> element from the collection with specified index, were indexing starts from 0.

 

item(index) – Returns <form> element from the collection with the  index.

 

namedItem(id) – If the form element is named with id, it’s content can be retrieved with namedItem method.

 

var len = document.forms.length;

 

 

 

 

 

 

//Returns id of form with index=0.

var x = document.forms[0].id;

 

//Returns id of form with index=0.

var x = document.forms.item(0).id;

 

//Returns HTML content of the <form> element with id=”myApp”;

var x = document.forms.namedItem(“myApp”).innerHTML;

anchor

(Not supported in HTML5)

Returns collection of all <a> elements with a name attribute.

 

length – returns number of <a> elements in the collection

 

[index] – Returns <a> element from the collection with specified index, were indexing starts from 0.

 

item(index) – Returns <a> element from the collection with the  index.

 

namedItem(id) – If the form element is named with id, it’s content can be retrieved with namedItem method.

 

var x = document.anchors.length;

 

 

//Returns id of <a> with index=0.

var x = document.anchors[0].id;

 

//Returns id of anchors with index=0.

var x = document.anchors.item(0).id;

Gets HTML content of the first <a> element:

var x = document.anchors[0].innerHTML;

links

Returns collection of all links in the document. Links are <a> and/or <area> elements with href attribute.

 

length – returns number of <a>  or <area> elements in the collection

 

[index] – Returns <a>  or <area> element from the collection with specified index, were indexing starts from 0.

 

item(index) – Returns <a>  or <area> element from the collection with the  index.

 

namedItem(id) – If the <a>  or <area> element is named with id, it’s content can be retrieved with namedItem method.

 

 

 

 

 

 

 

 

 

var len = document.links.length;

 

 

 

//Returns complete URL from <a> collection with index=0.

var x = document.links[0].href;

 

 

 

 

//Returns complete URL from <a> collection with index=0.

var x = document.links.item(0).id;

 

 

 

//Returns complete URL with id=”myApp”

var x = document.links.namedItem(“myApp”).href;

cookie

Sets or returns all name/value pairs of cookies of the document.

//Get cookies

var c = document.cookie;

 

//Set cookies

document.cookie="username=Raja; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/";

 

implementation

This property is an object containing information of DOM as implemented by browser. It is used with hasFeature() method. This method takes name and version of DOM feature and returns if it is present or not.

var implement = document.implementation;

document.getElementById(“para”).innerHTML = implement.hasFeature(“CSS”, 2.0);

 

//Outputs as true if browser has implemented the feature.

 

Methods of document type

createDocumentFragment()

The createDocumentFragment() method creates empty document fragment node. It creates an imaginary Node object with all properties and methods of a node. It may be useful to extract parts of a document, make changes, add or delete a part, and all without affecting document structure.

Syntax for createDocumentFragment() method

//Creates document fragment with id ‘d’

var d = document.createDocumentFragment();

createElement(“elementName”) 

The createElement() method creates an element node.

Syntax for createElement() method

//Creates a button.

var btn = document.createElement(“BUTTON”);

createTextNode(“textContent”) 

The createTextNode method creates a text node.

//Creates button with “Click Me” text on it.

var btn = document.createElement(“BUTTON”);

var txt = document.createTextNode(“Click Me”);

document.write() 

The document.write() method writes an HTML expression and/or JavaScript code to a document. It can add a string to be displayed in a web-page and return result of a method and display it upon. The document.write() method can be used to create entirely new documents in other windows and frames. However, it erases the content of the other document before writing into it. The contents get buffered till the content loading terminates and close() is called, and then display it. The innerHTML() DOM method (although IE proprietary) is currently preferred than the document.write()  in modern codes.

Syntax for document.write() method

//Returns sum of the numbers.

document.write(“Sum of numbers ” + mySum());

//Output: Sum of numbers 5

document.writeln()

The document.writeln() method is similar to document.write() method but appends a ‘\n’ or so called a new-line character after outputting string.

Syntax for document.writeln() method

//Returns sum of the numbers.

document.writeln(“My name is Raju”);

document.writeln(“I work for a software company”);

//Outputs each sentenced in separate lines:

  • My name is Raju 
  • I work for a software company

Example of document.writeln() method

document.open()

The document.open() method opens a document's string to collect an output from document.write or document.writeln methods.

Syntax for document.open() method

document.open();

document.close()

The document.close() method closes the opened document's string and displays the output string.

Syntax for document.close() method

document.close();

Example with document open, close and write methods

Methods used to walk a DOM tree

getElementById(“elementId”) 

The getElementById() method is commonly used to get an HTML element in JavaScript. Each HTML element has an unique id, which is passed to this method in order to access it.

Syntax for getElementById() method

//Returns mySum() function value to “para” in HTML.

document.getElementById(“para”) = mySum();

getElementsByTagName(“elementName”) 

The getElementsByTagName() method returns a collection of all elements in a document with specified tag name. The returned element is a NodeList object which represents a collection of nodes. It can be accessed by index numbers starting from 0.

Syntax for getElementsByTagName() method

document.getElementsByTagName(tagname);

Example of getElementsByTagName() method - changing an element in a list

 

›› go to examples ››