JavaScript Document Object Model

Introducing DOM

Document Object Model (DOM) is a standard object model and programming interface for HTML.
It defines a standard for accessing documents.
It is a World Wide Consortium standard.
It is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of a document.

1. DOM Object

DOM Properties

Properties	Description
Cookie	It returns all name or value pairs of cookies in the document.
documentMode	It returns the mode used by the browser to render the document.
Domain	It returns the domain name of the server that loaded the document.
lastModified	It returns the date and time of last modified document.
readyState	It returns the status of the document.
Referrer	It returns the URL of the document that loaded the current document.
Title	It sets or returns the title of the document.
URL	It returns the full URL of the document.

DOM Methods

Methods	Description
close()	It closes the output stream previously opened with document.open().
clear()	It clears the document in a window.
getElementById()	It accesses the first element with the specified ID.
getElementByName()	It accesses all the elements with a specified name.
getElementByTagName()	It accesses all elements with a specified tagname.
open()	It opens an output stream to collect the output from document.write().
write()	It writes output (JavaScript code) to a document.
writeln()	Same as write(), but adds a newline character after each statement.

Example : Program on DOM() Methods

<html>
<head>
     <script type="text/javascript">
     function check()
     {
          var username = document.getElementById("uname");
          var password = document.getElementById("pass");
          if(username.value=="abc" && password.value=="123")
               alert("Hello!!! You are successfully signed in");
          else
               alert("Invalid Username and Password!!!");
     }
     </script>
</head>
<body>
     <h2>Login</h2>
     Username:<input type = "text" id="uname"><br>
     Password:<input type = "password" id="pass"><br>
     <input type="button" onClick="check()" Value="Sign In">
</body>
</html>

Output:

dom login 1

2. Element Object

Element object contains references of all elements in a form.

Element Object Properties

Property	Description
Id	It sets and returns the Id of an element.
Value	It returns the value of an element.
innerHTML	It sets or returns the HTML contents of an element. If you want to access the text within a non <input> HTML element, then you have to use innerHTML property instead of value.
Length	It returns the number of entries in the element array.
tagName	It returns the tagname of an element as a string in uppercase.

Example : Simple Program on Element Object

<html>
<head>
     <script type="text/javascript">
     function welcome()
     {
          var fname = document.getElementById('fname');
          var buttxt = document.getElementById('buttxt');
          buttxt.innerHTML = fname.value;
     }
     </script>
</head>
<body>
     <p>Welcome <b id = 'buttxt'></b></p>
     Your Name : <input type = "text" id="fname"><br>
     <input type = "button" onClick="welcome()" value="Enter">
</body>
</html>

Output:

element object 1

3. Anchor Object

Anchor object represents an HTML hyperlink.
It allows you to create a link to another document with the 'href' attribute.
You can access an anchor by using getElementById() or by searching through the anchors[ ] array of the Document object.
You can add anchors to the anchors[ ] array but you cannot delete, replace or modify them.

Anchor Object Properties

Property	Description
Href	It sets or returns the value of the href attribute of a link.
name	It sets or returns the value of the name attribute of a link.