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.
dom

1. DOM Object

DOM Properties

PropertiesDescription
CookieIt returns all name or value pairs of cookies in the document.
documentModeIt returns the mode used by the browser to render the document.
DomainIt returns the domain name of the server that loaded the document.
lastModifiedIt returns the date and time of last modified document.
readyStateIt returns the status of the document.
ReferrerIt returns the URL of the document that loaded the current document.
TitleIt sets or returns the title of the document.
URLIt returns the full URL of the document.

DOM Methods

MethodsDescription
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

dom login 2

2. Element Object

Element object contains references of all elements in a form.

Element Object Properties

PropertyDescription
IdIt sets and returns the Id of an element.
ValueIt returns the value of an element.
innerHTMLIt 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.
LengthIt returns the number of entries in the element array.
tagNameIt 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   element object 2

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

PropertyDescription
HrefIt sets or returns the value of the href attribute of a link.
nameIt sets or returns the value of the name attribute of a link.