DOM

Before proceeding with the code, the first requirement is to understand the DOM or Document Object Model. The DOM explains how the window is related to document, how a document is related to body, and such relationships.



If you know the DOM model correctly, you can go with coding with a much more efficient manner because you know when and with which object(object like window, document, body, h1, div, etc) you have to attach an event to achieve a task.



DOM can be defined as:

" a logical structure of documents and the way in which a document is accessed and manipulated. it provides an API or application programming interface for valid HTML and well formed XML "





Now lets look at the hierarchy of DOM:



"Window" --comes at top

"Window"--> frame, document, location, history (these four  came at same level under windows)



Now as we will deal with the document, so let us go inside document what comes according to DOM.



"Window" ---> Document --> html -->head, body



head-->title

body-->h1, b, u , etc html tags.



So now you can imagine that the top most part is "window" which gets interpreted first and its events are executed first, the second is document, and the hierarchy goes on. 



Attach you event when you want them to execute. For example- 

a. I want to attach an event to my window close event so that whenever user leave my page, he recieves an alert message "bye". So we attach that event to "close" action of the "window" object which gets executed whenever the window is closed.



b. Now suppose i want to display a message when my page gets loaded, then i will attach that event with "document" object.



c. Now the other situation can be, suppose i want to execute an event each time the body gets loaded or document gets loaded, so i can attach that event on "body onload" or with document on load, it all depends on your need. You will know better when we start with the programming from my next topic.



d. The other events can be "onlcick" so that an action is performed when the user clicks on that object. "onmouseover", onmouseout", ondblclick, etc are many events available with which we can attach several actions.



Now from next, we will start with code.



Always keep in mind the hierarchy of the DOM whenever you try to write the JS or jQuery code, so that you can write it efficiently.

Tags: cdsalinuxoopsprogrammingunix