| home / programming / professional / chap6/ 2 |    [previous] [next] |
|
|
|
Finally, the Level 0 DOM also has a links array object. Not surprisingly, it contains all the hyperlinks (<a href="">) in the document. You rarely need access to the links, but sometimes it's useful to set event handlers for all the links through a JavaScript function instead of hardcoding each one in the HTML. For example:
var x = document.links;
for (var i=0; i<x.length; i++)
{
x[i].onclick = someFunction;
}
| Property |
Read/write |
Description |
| href |
read/write |
Accesses the href attribute of the link. (You can also read out parts of the URL with the properties hash, host, hostname, pathname, port, protocol, and search). |
| text |
read-only |
The text (if any) between the <a> and the </a>. Only supported by Netscape 4+ and Opera. In IE you can use innerText or innerHTML, but these aren't part of DOM Level 0. |
The document object has a similar property array called document.anchors[], which contains all anchors ( <a name="">) in the document. However, you hardly ever need it.
Both Netscape and Microsoft updated their DOMs to allow access to element styles, when they introduced DHTML. Since they were also struggling for control of the browser market, the two companies produced radically different, completely incompatible DOMs. Since then, these two intermediate DOMs have been superseded by the W3C DOM. Nonetheless you will occasionally need them to write DHTML for the version 4 browsers.
First, let's take a look at what DHTML actually is. "Dynamic HTML" is not a standard: it's a catch-phrase invented long ago to promote the version 4 browsers. Meanwhile it has become a basic tool for web developers.
Part of DHTML involves changing the styles of HTML elements without reloading the page. The trick is that, when you change a style, the browser immediately shows this change, without reloading the page. If you choose your effects wisely, DHTML can be a very valuable addition to any web site.
As an example, take this HTML
<div id="testdiv" style="
position: absolute;
top: 50px;
left: 50px;
font: 12px verdana;
border: 1px solid #000000;">
This is the test div<br />
<a href="javascript:changeIt()">Change</a> its
position
</div>
Using some script, we change the <div>'s styles extensively. The browser immediately reacts:
In the W3C DOM, which we'll look at shortly, the script would be as follows:
function changeIt() // W3C DOM
{
document.getElementById('testdiv').style.left = 0;
document.getElementById('testdiv').style.position = 'relative';
document.getElementById('testdiv').style.font = '20px verdana,arial,helvetica';
document.getElementById('testdiv').style.textAlign = 'right';
}
You access an HTML element, go to its style property, access a CSS property, and change it.
In JavaScript the dash (-) is a minus sign and cannot be used for style names. To translate the CSS property text-align, remove the dash and make the next character uppercase. Now it becomes the property textAlign. Similarly, CSS z-index becomes the script property zIndex, and CSS margin-left becomes the script property marginLeft.
These changes are immediately visible. In our example, the test <div> changes its position from absolute to relative, its font size is enlarged, and the text is aligned right. If these changes make sense to your users, they will appreciate the extra effects in your site.
To execute such a script correctly, the browser has to be able to actually change the style. In modern browsers it should be possible to change any style, but you'll nonetheless find some browser-compatibility problems. IE 5 on Mac, for instance, doesn't support the changing of fontSize or fontFamily. There's nothing you can do about this sort of compatibility problem.
In the code example above we access the HTML element through the W3C DOM. Browsers that don't support this DOM will give error messages for this code. So, we need the Microsoft and Netscape DOMs to make our script cross-browser compatible.
| home / programming / professional / chap6/ 2 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 11, 2003
Revised: March 28, 2003
URL: http://webreference.com/programming/professional/chap6/2
