An overview of HTML5 DOM

Rajnilari2015
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 890 red flag
Rating: 3 out of 5  
 1 vote(s)

Document Object Model (DOM) is a conceptual way to represent and interact with the HTML, XML, XHTML objects. The objects in DOM are represented in a tree hierarchial fashion.This article will provide an overview of Document Object Model (DOM).
Recommendation
Read CRUD with NodeJS and ExpressJS before this article.

Introduction

Document Object Model (DOM) is a conceptual way to represent and interact with the HTML, XML, XHTML objects. The objects in DOM are represented in a tree hierarchical fashion.This article will provide an overview of Document Object Model (DOM).

What is Document Object Model (DOM)?

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

  1. The HTML elements as objects
  2. The properties of all HTML elements
  3. The events for all HTML elements
  4. The methods to access all HTML elements

In the case of DOM, every document nodes are organized in a hierarchical tree fashion which is call as DOM Tree. This DOM Tree objects are then accessed by using methods on the objects.

How a DOM tree looks?

Typically, a DOM tree should be similar to

where every element at what ever level it is may have properties or attributes,events associated to them.Let's see what we are talking about with a concrete example

Understanding the DOM Tree concept using Code

Let us look into the below code

<html>

     <head>

        <title>Simple HTML</title>

        <script type="javascript">        

                function LoadMeFirst(){

                        alert("Html Dom loading.....");

                }

                function ClickME(){

                alert("Dom Loaded and hence the button is clicked");

                var accessingTheParagraphText = document.getElementsByTagName('p')[0].innerHTML;

                }
            </script>
     </head>

     <body onLoad="LoadMeFirst()">

                <p>A simple paragraph</p>

                <input type="button" id="myButton" value="MyButton" onClick="ClickME()" />

    </body>

</html>

In the above code snippet example

  1. The HTML elements are - HTML,HEAD,TITLE,BODY,P,INPUT
  2. The button properties are - TYPE,ID,VALUE
  3. The Event for
    1. BODY is: onLoad
    2. BUTTON is: onClick
  4. Method to access the HTML elements - getElementsByTagName

What operations can be done inside a DOM Tree?

We can create a new element, modify an existing element,delete an element from a DOM Tree. Also we can access the element value from a DOM tree.

Reference

Document Object Model

Conclusion

Hope this article has given the overview about DOM as what it is, how a DOM tree looks, what comprises a DOM tree, what are the operations that a DOM tree provides etc.Thanks for reading.

Recommendation
Read Map and Reduce function of Javascript after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Posted by: Rajayadav on: 12/7/2015 | Points: 25
Nice, Thanks for sharing..
Posted by: Rajnilari2015 on: 12/7/2015 | Points: 25
Thanks a lot
Posted by: Skippyjoyce0 on: 12/11/2015 | Points: 25
prefer dick mate
Posted by: Rajnilari2015 on: 12/11/2015 | Points: 25
?????????

Posted by: Haleybrooke on: 12/17/2015 | Points: 25
Handy tutorial!

http://www.aussieessays.com/write-my-essay/
Posted by: Rajnilari2015 on: 12/17/2015 | Points: 25
@Haleybrooke, thanks

Login to post response

Comment using Facebook(Author doesn't get notification)