Have you ever tried to get the HTML values inside a DIV or TABLE element or have you tried to make a SPAN tag behave like DIV and vice versa. If you haven’t tried this till now then, I could say it’s possible with HTML DOM and it can be controlled using JavaScript.
To start with all you need to know is little HTML, JavaScript, CSS & Dreamweaver 8. DOM stands for Document Object Model or in my own words skeleton of a browser and is a W3C recommendation. You can play with any HTML object displayed over the browser the way you play with movieclip & component objects in flash. Fine, now lets go in-depth.
Working with DOM
HTML DOM has a structure similar to HTML, like Element(tag) , Attribue & Value. For example in html its
<body background=”bgimage.gif”>
Where “body” is element, “background” is attribute and”bgimage.gif” is value. Similarly in DOM its,
document.body.background=”bgimage.gif”
Where “document.body” is element, “background” is attribute/property and “bgimage.gif” is value.
Now lets try applying it through javaScript:
funtion applyBg() {
document.body.background=”bgimage.gif”
}
Now we have to trigger this JavaScript function using event handler called “onclick” through a simple form button;
<input name=”button1″ type=”button” value=”Change Background” onclick=”applyBg()”
By this way you can change the property of an HTML/browser element.
Hope now at this stage after trying these code example you have come into a conclusion about DOM, lets take one more DOM example on form elements:
document.myform.textbox1.value = “Hello! Brother”
Where “document.myform” is the form name, “textbox1″ is the text box object name and “Hello! Brother” is the value to be populated inside the text box. Even this can be triggered in the same way as mentioned in the previous example within a JavaScript function. The properties & values does varies from one element to other element in a document.
DOM Basics
Basically, there are three important things to know to master DOM, one identify/locate the object, second look for properties & values for that object and third event handler to trigger the function.
Locating/identifying an Object
There are mainly three methods to locate an object:
- Direct Method
- Form Method
- GetElementById / GetElementByName / GetElementByTagName Method
Direct Method
These are identifiers which are already inbuilt for unique HTML/browser components, for examaple:
document.body.property=”value” – for body element
document.links[i].property=”value” – for links
document.appletName.property=”value” – for applets and many more
Form Method
These identifiers are only restricted to form & form elements like, button, text box, combo box(dropdown), textarea, radiobutton, checkbox etc; For example:
document.formName.elementName.property=”value”
GetElementById Method
This is an unique and independent method of locating an object. Any object can be accessed by assigning an id=”idName” attribute into any element. For example:
<div id=”idName”>Hello! Brother</div>
document.getElementById(“idName”).property=”value”
For example: function to read an HTML code from a DIV element and populate it to a Textarea:
<div id=”getCode”><table width=”100%” border=”0″ cellpadding=”2″ cellspacing=”2″><tr><td>This is a sample content</td></tr></table></div>
<textarea cols=”10″ rows=”5″ name=”putCode”>No Data</textarea>
document.form1.putCode.value = document.getElementById(“getCode”).innerHTML;
There are other similar methods resembling to GetElementById, those are GetElementsByName and GetElementsByTagName. The “GetElementsByName” is used similar as GetElementById. Whereas “GetElementsByTagName” just only looks for particular tags like and can only be used alongwith “GetElementById” or “GetElementsByName” identifier.
Setting Atrribute Values to the Objects
Help from Dreamweaver 8 method
For more elements & attributes/properties you can refer to “Reference” section of Dreamweaver MX or later. To do this follow this procedure: Goto”Window” menu from menu bar and select “Reference” or press “Shift + f1″ key to open reference window. From “Book” dropdown select “O’RIELLY JavaScript Reference”. Now select any element name from “Object” dropdown, say “body” and select any attribute/property from the next dropdown. Now you can see detailed description about the each attribute and their values. Look for “Object Model Reference” you will find the way to locate the object(document.body), you can find all properties and values of that object including event handlers for individual objects. Similarly you can do this for almost all other objects too. You can execute all properties with the help of above mentioned examples.
Event Handlers
Event handlers are used to trigger one or more JavaScript functions. Event handlers differ from one object to the other. Here are few common examples:
Body Element
onload – Triggers when page loads
onunload – Triggers when page unloads
onafterprint – Triggers when before page loads
onbeforeprint – Triggers when after page loads
Common
onclick – triggers when user clicks that object
onblur – triggers when loses focus
onfocus – triggers when gets focus
onmouseover – triggers when mouse pointer moves over the object
onmouseout – triggers when mouse pointer moves out of the object
onmousedown – triggers when mouse button is on pressed state
onmouseup – triggers when mouse button is released after pressed state
Textboxes
onchange – Triggers when the value or selection changes inside the component (also applies for list element)
onselect – Triggers when the value inside the textbox is selected
onkeydown – Triggers when any key on the keyboard in the pressed state
onkeyup – Triggers when any key on the keyboard is released after pressed state
onkeypress – Triggers this event between onkeydown and onkeyup state
