Dynamic Object model(DOM)

What is Dynamic Object Model?
How can we do dynamic changes based on form events?


Before going ahead to learn about form object and event handling, we should know where they belong too. Any action or event that causes a dynamic change in a web page using javascript should be grouped under DOM (dynamic object model). Every html element can be accessed and changed dynamically using javascript DOM.
The W3C 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 Document Object Model (DOM) is an application programming interface (API) for valid HTML.
All html elements and their attributes can be accessed through the DOM tree. Their contents can be modified or deleted, new elements can be created by using DOM.
For an example, the form with name "ssss" in a html document can be accessed as document.ssss;

Event Handling:

Events are action that occur on a web page and are mostly triggered by users. There are in build handler programs to handle those events. For an example: we will consider a form button or a link. Say when a user moves the mouse over it, a mouse over event is triggered. We can capture such events and invoke a javascript function to do an action.
The event handler is usually added as an attribute to html tag. A mouse over event is captured using the handler onMouseOver. In the below example we will do an alert when a mouse is moved over a button.


<script language="javascript">
function testdom()
alert("on Mouse Over"); }
<input name=xx type=button value=click onMouseOver="testdom()"></input>


Ask Questions

Ask Question