COM271, Week 9
The Document Object Model
Web browsers work because they are able to tie the various lines of html, CSS, and JavaScript together. You've already seen this as we use html class and id attributes, along with element names, to write CSS style rules for particular elements. We've also been using this, without explanation, when we described the use of document.getElementById() to obtain values from html table input fields (see JavaScript Functions or Regular Expressions, for example).
Here's more.
Form Values
Obtaining a form value: To retrieve a value from a form element means that the element has been identified
<input type="text" id="firstname" >
which makes it retrievable using
document.getElementById('firstname')
The value of the element is then, using the JavaScript nodal .value,
first_name=document.getElementById('firstname').value
Setting a form value: Alternatively, a value may be set,
document.getElementById('firstname').value = 'Joe';
InnerHTML to change text element content
Setting the content of text elements: Note that setting a value is possible for input elements because they have an attribute called value. You cannot affect the content of other html elements—h1-h6, p, etc.—this way, because they do not have an attribute called value. To change the actual content of a text container, use the HTML Element InnerHTML property
fname=document.getElementById('firstname')
document.getElementById('greeting').innerHTML="Hello, "+fname+"\."
DHTML: JavaScript plus CSS
Accessing CSS properties: You may use document.getElementById('firstname').style to access any element's css properties. For example, a mouseover on this paragraph can be used to change the color property to red and back. Try it.
Here's how:
<p id="demo1" onmouseover="document.getElementById('demo1').style.color = '#f00';" onmouseout="document.getElementById('demo1').style.color = '#fff';"><span class="topic">Accessing CSS properties</span>: You may use....
DHTML for Remote Rollover Effects
Here, I set up this paragraph with javascript to affect another (hidden) paragraph. If you rollover this paragraph, the other will appear. Try it.
The Genie Appears!
Here's the code:
<p style="width:300px;padding:5px;border:1px solid #ffc;" onmouseover="document.getElementById('demo2').style.visibility = 'visible';" onmouseout="document.getElementById('demo2').style.visibility = 'hidden';" >Here, I set up this paragraph with javascript to affect another (hidden) paragraph. If you rollover this paragraph, the other will appear. Try it.</p>
<p id="demo2">The Genie Appears!</p>
Note that you must style the "remote" content so that it is positioned where you want it to appear and that it is initially invisible:
p#demo2{width:200px;padding:5px;border:1px solid #f00;visibility:hidden;margin:-90px 0 0 335px ;}
This effect may be extended to any identified element. The most common usage would be to have a small thumbnail image used to trigger visibility in a larger image set off to one side of a page.