Search within TutorialsPark

Javascript DOM: Document Metadata


Getting Document Metadata using the Document Object Model.


Javascript DOM : Document Metadata

The purpose of DOM(document Object Model) is to get data or information about the document, users can extract data about the document using the metadata properties.

Useful insights about the document can be obtained using this property.

Eg: the character Set used, last modified time, current URL etc.

Example: Javascript DOM - Getting information about the Document

Give it a TRY! »


Javascript DOM : Document Backward Compatability

The metadata property CompatMode is used to find out how the document was handled by the browser.

Even Documents not conforming to the HTML specifications(i.e nonstandard document) are displayed by the browser as browsers have backward compatability(i.e Quirks Mode).

There are two compatability modes for a document:

CSS1Compat : Documents conforms to a valid HTML specifications

BackCompat : Its a non standard document hence quirks mode is invoked.


Javascript DOM Metadata : Backward Compatability

To obtain fine detailed information about document's address(i.e URL) and enable navigation to other documents, the location object is used.

This is done using the location object returned by document.location property.

Example: Javascript DOM - Location Object

Give it a TRY! » Note: The property search returns the query string part of the URL, and hash property returns the URL fragment.


Javascript DOM : Navigation using location Object

The Location object retrieved using document.location property is used to naviagte to other pages or locations.

To navigate to a location within the current document, assign a new value to the property document.location.hash , it makes the browser navigate to the element whose id value matches with the hash value.

To navigate outside the current document, use the properties of the Location object , this is done through the use of property href or the methods like assign and replace

Example: Javascript DOM Navigating within the document using the Location Object

Give it a TRY! »


Example: Javascript DOM : Navigating outside the document using the Location Object

Give it a TRY! »


Javascript DOM: Reading and Writing Cookies

The cookies associated with a document can be read from, written to and updated using property cookie.

Cookies are used to store small volumes of data in form of name/value pairs, the maximum limit of a cookie is 4kb.

When a cookie is created a new name/value pair is assigned as a value for the cookie property.

If a value of a property is read, you retrieve all the cookies associated with that property.If multiple cookies exists, then all are returned as the value of the cookie property.

Example: Javascript DOM - Create, Read and Write Cookies

Give it a TRY! » Note: The write button adds new value to the cookie property, while the update button updates the value.


Javascript DOM : Ready State

Javascript DOM property document.readyState is used to get information about the current state of the document, while the browser loads and parses the document.

As soon the browser encounters the <script> element, it begins executing the script, but script execution can be deffered using the attribute differ

To find out at what stage the browser has got into in loading and executing the document, the property readyState it used, it can attain three value as explained below:

Table : Return Values of the ReadyState Property

Operator Description
loading The document is being loaded and parsed by the Browser
interactive The parsing process has been completed by the linked resources like images, media files etc are still being loaded by the browser.
complete The document has been parsed and all linked resources have been loaded

Example: Javascript DOM - Document ReadyState

Give it a TRY! » Note: The value of readyState changes from loading to interactive as the browser loads and parses the document.


Javascript DOM : Implementation Details

The Javascript DOM property document.implementation is used to get information about the browser's implementation of DOM features.

It returns a DOMImplementation object which comes with a method called hasFeature , which finds out which DOM features are implemented by the browser.

Example: Javascript DOM - Implementation Details

Give it a TRY! » Note:It has been found that some browsers implement features but don't report it via the hasFeatures method.