JavaScript Document Object

JAVASCRIPT BASICS

• Introduction to JavaScript
• Javascript Features
• JavaScript in HTML
• JavaScript Syntax
• Output in JavaScript
• JavaScript Variables
• Javascript let Keyword
• JS Literals and Keywords
• JavaScript Data Types
• JavaScript Operators
• JavaScript Events
• Javascript const Keyword

JAVASCRIPT FLOW CONTROL AND LOOPS

• JS if, else and else if
• JavaScript for Loop
• JS while and do-while loop
• JS Switch case
• JS break and continue

JAVASCRIPT ADVANCED

• JavaScript Strings
• JavaScript String Methods
• JavaScript Array
• JavaScript Regular Expression
• JavaScript Popup Boxes
• JavaScript Functions
• JavaScript Default Parameters
• JavaScript Rest Parameters
• JavaScript Arrow Function
• JavaScript Errors
• JavaScript Error Handling
• JavaScript Cookies

JAVASCRIPT OBJECT

• JavaScript Objects
• JavaScript User-defined Object
• JavaScript Boolean Object
• JavaScript Number Object
• JavaScript Math Object
• JavaScript Date Object
• JavaScript RegExp Object

JAVASCRIPT WEB API AND INTERFACES

• JavaScript Browser Object
• JavaScript Window Object
• JavaScript History Object
• JavaScript Navigator Object
• JavaScript Location Object
• JavaScript Screen Object
• JavaScript Document Object

JavaScript Document object is an object that provides access to all HTML elements of a document. When an HTML document is loaded into a browser window, then it becomes a document object.

The document object stores the elements of an HTML document, such as HTML, HEAD, BODY, and other HTML tags as objects.

A document object is a child object of the Window object, which refers to the browser.

You can access a document object either using window.document property or using object directly.

See, What we can do with Document Object:

• Suppose you have created a FORM in an HTML document using the FORM element and added some text fields and Buttons on the Form. On Submitting the Form you want to validate the input or display input on another page. In this situation, you can use a document object which is a child object of the window object. Using the document object, you can access the elements of the form and validate the Input.
• The Document Object provides different collection elements, such as anchor and Links which helps you to count the number of specific elements on a form.
• The Document Object also provides various properties such as URL, bgcolor, etc. which will allow you to retrieve the details of a document and various methods such as open(), close(), write(), getElementById(), getElementByName(), etc. which allow you to perform various tasks like opening an HTML document to display output and writing a text on Web Page.
• The Document Object also allows you to create cookies for a webpage by providing a property named cookie. A cookie stores information about the user’s computer, which helps in accessing visited websites.

Now let’s explore document object methods and properties.

JavaScript Document Object Properties

As we know, a property of an object is the value associated with the object. The property is accessed by using the following notation:

objectName.propertyName

where objectName is the name of the object and propertyName is the name of its property.

Now we will show you the properties of document object in the table given below:

Properties	Description
cookie	returns a report that contains all the visible and unexpired cookies associated with the document
domain	returns the domain name of the server from which the document has originated
lastModified	returns the date on which document was last modified
documentMode	returns the mode used by the browser to process the document
readyState	returns the loading status of the document.
referrer	returns the URL of the documents referred to in an HTML document
title	returns the name of the HTML document defined between the starting and ending tags of the TITLE element
URL	returns the full URL of the HTML document.

Let’s take an example, to see the document object properties in action:

JS Document Methods Example

Document Methods Example

    <script>
        // Open document
        document.open();
        // writing
        document.write("Hello" +"<br>");
        document.getElementById("demo").innerHTML = "Set by ID";
    </script>
</body>

JavaScript Document Object Methods

JavaScript Document object also provides various methods to access HTML elements.

Now we will show you some of the commonly used methods of the document object:

Methods	Description	Syntax
open()	opens an HTML document to display the output	document.open(mimetype, replace)
close()	closes an HTML document	document.close()
write()	Writes HTML expressions or JavaScript code into an HTML document	document.write(exp1, exp2, ...)
writeln()	write a new line character after each HTML expressions or JavaScript Code	document.writeln(exp1, exp2, ...)
getElementById()	returns the reference of first element of an HTML document with the specified id.	document.getElementById(id)
getElementByName()	returns the reference of an element with the specified name	document.getElementsByName(name)
getElementsByTagName()	returns all elements with the specified tagname	document.getElementsByTagName(tagname)

Now let’s take an example, to see the document object methods like open(), write(), and getElementById() to explain their usage. See the below example:

It Will change

    <script>
        // Open document
        document.open();
        // writing
        document.write("Hello" +"<br>");
        document.getElementById("demo").innerHTML = "Set by ID";
    </script>
</body>

< prev