Today we get to the tricky part of our series: scripting dHTML. One reason HTML has been so successful is that it provides a consistent way to present a document on the Web. You mark up a page once, and, with a few exceptions, it basically works everywhere. The same is true with JavaScript. Even with the multitude of versions, a consistent syntax and a core level of functionality will work with all browsers that support JavaScript. CSS is also consistent, at least as far as syntax goes. There's one way to declare things, and, barring compliance issues, you get a consistent result across browsers. So everything seems as though it's poised to enable you to create cross-platform, consistently rendered dynamic pages.
But there's one small problem.
In mid-1997, when Netscape and Microsoft were creating their dynamic HTML browsers, there wasn't a spec for how a scripting language should interact with elements on a Web page. There was, however, a precedent for how JavaScript should interact with collections of images, links, and form-elements. But unfortunately, each company had a different idea about how to control elements on a page.
Netscape added collections of objects to JavaScript with the introduction of its <LAYER> tag. This went along with its dHTML rendering: A layer of content - either with the depreciated <LAYER> tag or with a <DIV> tag that's been positioned with CSS - could be accessed as a JavaScript object, and then its properties (left, top, visibility, and background color) could be manipulated.
Microsoft, however, went a few steps further. With a completely new rendering engine, it could position not only any element, but also could alter any of the CSS selectors assigned to any element. (So, for example, you could change the font-family or your EM tag.) Furthermore, it implemented a Document Object Model that could be accessed through any programming or scripting language that happened to run on Internet Explorer.
The observable difference between the two is really the syntax, though. Netscape supports a treelike syntax:
On the other hand, Internet Explorer exposes all HTML objects as a flat collection and lets you modify the style object:
bottom.style.left
If you try to use either method on the wrong browser, you will get an error message. But all is not lost. There are many "reliable techniques" that work around this annoying inconsistency. Once you learn these techniques, you should be able to code whatever you want. This lesson will cover how to access the elements of the DOM with a minimum amount of conditionalization, and then we'll show you how to construct a very simple JavaScript routine that moves things around on the screen.
