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).
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:
- The HTML elements as objects
- The properties of all HTML elements
- The events for all HTML elements
- 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
- The HTML elements are - HTML,HEAD,TITLE,BODY,P,INPUT
- The button properties are - TYPE,ID,VALUE
- The Event for
- BODY is: onLoad
- BUTTON is: onClick
- 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.