Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





What is DOM (Document object model)?

What is DOM?

When html document is loaded in the browser, it becomes a document object. It is the root element that represents the html document. It has properties and methods. By the help of document object, we can add dynamic content to our web page.

As mentioned earlier, it is the object of window. So

window.document
Is same as

document

The DOM is a ittutorialC (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The ittutorialC Document Object Model (DOM) 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."

The ittutorialC DOM standard is separated into 3 different parts:

  • Core DOM - standard model for all document types
  • XML DOM - standard model for XML documents
  • HTML DOM - standard model for HTML documents


    • What is the HTML DOM?

    The HTML DOM is a standard object model and programming interface for HTML. It defines:

  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements
    • In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

    NOTE : - When a web page is loaded, the browser creates a Document Object Model of the page.
    The HTML DOM Document. In the HTML DOM object model, the document object represents your web page. The document object is the owner of all other objects in your web page. If you want to access objects in an HTML page, you always start with accessing the document object.

    Eg :-

    document.getElementById("demo");

  • The global object "document" represents the HTML document which is displayed in the current browser window.
  • document is an object. The line of code you pasted is supposed to run in the web browser. The web browser will have JavaScript engine. That engine will provide the developer with some runtime objects, such as document and window to interact with. The environment is called Browser Object Model (or BOM).

    • Example :

    File name : index.php

    <html>
    <body>
    <script language="javascript" type="text/javascript">
    document.write("Hello World!");
    </script>
    </body>
    </html>

    Methods of document object

    File name : index.php

    We can access and change the contents of document by its methods.

    The important methods of document object are as follows:

    Method Description
    write("string") writes the given string on the doucment.
    writeln("string") writes the given string on the doucment with newline character at the end.
    getElementById() returns the element having the given id value.
    getElementsByName() returns all the elements having the given name value.
    getElementsByTagName() returns all the elements having the given tag name.
    getElementsByClassName() returns all the elements having the given class name.

    Accessing field value by document object

    we are going to get the value of input text by user. Here, we are using document.form1.name.value to get the value of name field. Here, document is the root element that represents the html document.
    form1 is the name of the form.
    name is the attribute name of the input text.
    value is the property, that returns the value of the input text.
    Let's see the simple example of document object that prints name with welcome message.

    File name : index.php

    <script type="text/javascript">
    function printvalue(){
    var name=document.form1.name.value;
    alert("Welcome: "+name);
    }
    </script>

    <form name="form1">
    Enter Name:<input type="text" name="name"/>
    <input type="button" onclick="printvalue()" value="print name"/>
    </form>

    document.getElementById() method

    The document.getElementById() method returns the element of specified id. we can use document.getElementById() method to get value of the input text. But we need to define id for the input field.

    File name : index.php

    <script type="text/javascript">
    function getcube(){
    var number=document.getElementById("number").value;
    alert(number*number*number);
    }
    </script>
    <form>
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input type="button" value="cube" onclick="getcube()"/>
    </form>

    document.getElementsByName() method

    The document.getElementsByName() method returns all the element of specified name. The syntax of the getElementsByName() method is given below: document.getElementsByName("name") Here, name is required.

    Example of document.getElementsByName() method

    File name : index.php

    <script type="text/javascript">
    function totalelements()
    {
    var allgenders=document.getElementsByName("gender");
    alert("Total Genders:"+allgenders.length);
    }
    </script>
    <form>
    Male:<input type="radio" name="gender" value="male">
    Female:<input type="radio" name="gender" value="female">

    <input type="button" onclick="totalelements()" value="Total Genders">
    </form>

    document.getElementsByTagName() method

    The document.getElementsByTagName() method returns all the element of specified tag name. The syntax of the getElementsByTagName() method is given below: document.getElementsByTagName("name") Here, name is required.

    File name : index.php

    <script type="text/javascript">
    function countpara(){
    var totalpara=document.getElementsByTagName("p");
    alert("total p tags are: "+totalpara.length);

    }
    </script>
    <p>This is a pragraph</p>
    <p>Here we are going to count total number of paragraphs by getElementByTagName() method.</p>
    <p>Let's see the simple example</p>
    <button onclick="countpara()">count paragraph</button>

    Javascript - innerHTML

    The innerHTML property can be used to write the dynamic html on the html document. It is used mostly in the web pages to generate the dynamic html such as registration form, comment form, links etc.

    File name : index.php

    we are dynamically writing the html form inside the div name having the id mylocation. We are identifing this position by calling the document.getElementById() method.

    <script type="text/javascript" >
    function showcommentform() {
    var data="Name:<input type='text' name='name'><br>Comment:<br><textarea rows='5' cols='80'></textarea>
    <br><input type='submit' value='Post Comment'>";
    document.getElementById('mylocation').innerHTML=data;
    }
    </script>
    <form name="myForm">
    <input type="button" value="comment" onclick="showcommentform()">
    <div id="mylocation"></div>
    </form>

    Show/Hide Comment Form Example using innerHTML

    File name : index.php

    <!DOCTYPE html>
    <html>
    <head>
    <title>First JS</title>
    <script>
    var flag=true;
    function commentform(){
    var cform="<form action='Comment'>Enter Name:<br><input type='text' name='name'/><br/>
    Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/>
    <textarea rows='5' cols='70'></textarea><br><input type='submit' value='Post Comment'/></form>";
    if(flag){
    document.getElementById("mylocation").innerHTML=cform;
    flag=false;
    }else{
    document.getElementById("mylocation").innerHTML="";
    flag=true;
    }
    }
    </script>
    </head>
    <body>
    <button onclick="commentform()">Comment</button>
    <div id="mylocation"></div>
    </body>
    </html>

    Javascript - innerText

    The innerText property can be used to write the dynamic text on the html document. Here, text will not be interpreted as html text but a normal text. It is used mostly in the web pages to generate the dynamic content such as writing the validation message, password strength etc.

    File name : index.php

    <script type="text/javascript" >
    function validate() {
    var msg;
    if(document.myForm.userPass.value.length>5){
    msg="good";
    }
    else{
    msg="poor";
    }
    document.getElementById('mylocation').innerText=msg;
    }

    </script>
    <form name="myForm">
    <input type="password" value="" name="userPass" onkeyup="validate()">
    Strength:<span id="mylocation">no strength</span>
    </form>

    getElementsByClassName() Method

    The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.

    File name : index.php

    <!DOCTYPE html>
    <html>
    <body>

    <ul class="example">
    <li class="child">Coffee</li>
    <li class="child">Tea</li>
    </ul>

    <p>Click the button to change the text of the first list item (index 0).</p>

    <button onclick="myFunction()">Try it</button>

    <p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

    <script>
    function myFunction() {
    var list = document.getElementsByClassName("example")[0];
    list.getElementsByClassName("child")[0].innerHTML = "Milk";
    }
    </script>

    </body>
    </html>





    Previous Next


    Trending Tutorials


    PHP

    PHP

    100+ Tutorials
    oops

    PHP OOPs

    80+ Tutorial
    Codeigniter

    Codeigniter

    100+ Tutorial
    Laravel

    Laravel

    100+ Tutorials
    Node.js

    NODE.JS

    100+ Tutorials
    Javascript

    Javascript

    100+ Tutorials


    Review & Rating

    0.0 / 5

    0 Review

    5
    (0)

    4
    (0)

    3
    (0)

    2
    (0)

    1
    (0)

    Write Review Here


    Most Popular Tutorials

     Important Link