Waiting for the DOM - WebReference Update - 020314
((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) March 14, 2002
___________________________ Sponsors ________________________________
This newsletter sponsored by: 802.11 Planet Spring 2002 events.internet.com Nanotech Planet Spring 2002 _____________________________________________________________________
This week guest author Kenneth Tibbetts waxes poetic on "Waiting for the DOM." In other news SAP talks hierarchies, 15secs talks compression, AOL is testing Netscape, and Mozilla's almost there.
The response to the rollover roundup has been tremendous. Many users wrote in with suggestions and comments. Keep 'em coming, and we'll have a future update.
https://www.webreference.com *- link to us today https://www.webreference.com/new/ *- newsletter home
New this week on WebReference.com and the Web:
1. FEATURE: Waiting for the DOM 2. OTHER VOICES: * Fighting (with) Hierarchies - Part I: Basics * Web Site Compression 3. NET NEWS: * AOL testing new, improved Netscape * Mozilla 0.9.9 Released
Like what you see? Get our front page e-mailed to you every business day with our HTML newsletter. Just send an e-mail to:
or for this text newsletter:
Spread the word! Feel free to send a copy of this newsletter to your friends and colleagues, and while you're at it, snap a link to WebReference.com.
/-------------------------------------------------------------------\
Coming to the East Coast! 802.11 Planet Spring 2002 Conf. & Expo --The Only Trade Show & Expo Focused on 802.11 Business-- June 10-12 Pennsylvania Conv. Ctr., Philadelphia, PA. Whether you're an expert in 802.11 or need to quickly get up to speed and profit from it, 802.11 Planet is the premier event for this exploding industry. Sign up today to receive the latest updates on this and future 802.11 Planet events! https://seminars.internet.com/80211/spring02/index.html
\--------------------------------------------------------------adv.-/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. FEATURE: Waiting for the DOM
Even when a browser client 'supports' a method or property, it does not always follow that it acts the same as another browser. For instance, Opera claims to understand getAttribute and setAttribute, but it can't do diddly with either. And what good is Netscape 6 knowing all about the aural styles when it can't do anything about them?
Event handling is still the worst source for client script incompatibility - Netscape and Sea Monkey support some event listeners, while IE5+ still rely on a window.event. So event handling has to be branched to each client.
Screen display and page geometry still require proprietary scripting. If we want to support Navigator, IE4, N6 and IE6 we have to have four count them four branches! (innerWidth, clientWidth and document.body.scroll.left,clientX and pageXOffset, and clientX and document.documentElement.scroll.left). And we'll still probably screw up.... The DOM is silent about keyboard events.
CSS inheritance and support are also not uniform between browsers, but the differences are shrinking.
The next section will go into some browser specific reactions to document object methods and properties.
* Browser Specific Gotchas
IE5 doesn't get any closer to the root of the document than the body, and it cannot create or manipulate a documentFragment at all. (IE6 has added support for documentFragment and the document root.) In IE6, if you try the 'normalize' method, that is supposed to merge the text nodes of an element, you can crash the browser. IE doesn't use the constants for the nodeNames, so you must use the nodeType.
All versions of IE before 6 insist that the cursor style associated with a link is called 'hand', while Netscape and Opera use 'pointer'. No big deal until you try to script an element's cursor. Without a switch for IE5 and under you'll get invalid property errors.
Opera 5 is somewhere between the old browsers and the DOM enabled versions. It will render a nice looking page out of CSS and HTML, and it is fast, but it falters when you move from static to dynamic and interactive content. I can't script Opera events worth a darn.
You can use the DOM document.getElementsById(id) and the (element).style properties in Opera, but it does not yet extend to creating new elements and content. Though you can set the display property of any element when you load a document in Opera or Navigator 4, you cannot change it later. That one hurts... And Navigator will let you set the style of an element through its id, using document.layer[layername].ids, (with the s), but only as the document loads.
Netscape 6/Mozilla supports the button element - at last. Unfortunately, Opera 5 still does not, and Navigator probably never will. You can use an iFrame for importing content in Opera5, Netscape 6 and Sea Monkey, but so far IE5+ is the only one that gives you any significant presentation control of an iFrame. You can now change the disabled attribute for form elements, but you don't get any visual clues when it happens in Opera or Netscape, unless you script them in.
* More Gotchas
Event handling in all the browsers is still finicky. I continue to be surprised if something actually works as specified. IE5+ likes to wait until it has calculated the layout of the rest of the universe before it will update a display. I can't seem to make it incrementally display new content unless I break it up into smaller chunks.
You must have version 6 of IE to use the wild card in getElementsByTagName('*')
There are more specific behaviors- No two browsers handle CSS inheritance in exactly the same way, especially regarding font size and margin values.
And IE and Netscape don't always agree on whether an object is a child node or a sibling.
* Thanks, but no thanks, IE
The biggest problem with IE5+ is in not using things that aren't supported by the other guys. I refer to IE's plethora of unique, powerful features, from filters to ActiveX and data binding. An IE-only world gives you a lot of ready-made tools, in the same way Visual Basic gives you a ton of prefab code. Of course, there is a price. The vast and awful sameness of thousands of programs and millions of web pages attests to the actual limits of using menus to build applications.
Even when IE is on target with the recommendations, it is often a bit ahead of the pack.
When you traverse a document, Netscape and Sea Monkey put an element's attribute and text nodes on the same level - you will need some gymnastic ability to loop through an element's children and siblings in both clients. It doesn't hurt anything in IE to test the nodetype, but it does make more code....
And even though swapNode does exactly what you'd think in IE, to do the same thing in Netscape you have to mess about with cloning both nodes and replacing each original node with the clone of the other - a process somewhat less elegant than a Florida election.
/-------------------------------------------------------------------\
** When Face-to-Face is the Only Way ** The Internet is great for exchanging information and ideas, but nothing beats in-person learning and networking. Check out internet.com's upcoming Spring 2002 conferences and expositions including: ** Search Engine Strategies ** Nanotech Planet ** 802.11 Planet (Wireless) ** Instant Messaging Planet and more. Visit https://events.internet.com today!
\--------------------------------------------------------------adv.-/
* Practical Code
If you have been writing code for browsers for a while you've been working on constantly shifting ground. The newest versions are closer to a single standard, but they still have surprises.
I used to spend a lot of bytes of code to equally support Internet Explorer and Netscape Navigator - I became proficient in all of Netscape's Layer methods, and the riches of active Microsoft. It is still possible to write such vendor based code, but life is short, and bandwidth is, mostly, narrow.
My strategy now is to write simple HTML, for the dumbest client, and then add, transparently, features for them that support the W3C's recommendations. This will allow anyone to get something from a web page, but only the new and improved clients will get the whole thing. I do hope the tendency continues to support the W3C recommendations. The document object model is such an advantage over anything else - it's the difference between a petting zoo and a safari.
There is an elegance in using methods like createElement. You are not simply typing a set of static instructions for the client application to parrot back. You are negotiating, interacting with the client, in a kind of creative partnership. It makes pounding out replacement content with document.write or innerHTML look crude.
The browser base is getting more homogenous - IE6 adds a bit more support for the DOM. Mozilla/Netscape is even closer to full standards support. If only the Gecko wasn't so darn sensitive... Event handling and CSS inheritance are still the biggest problem areas for web page code writers. Probably by the time the vendors get it right we will be using XML for eveything - but that's another story....
# # # #
About the author: Kenneth Tibbetts is the creator of the Yankee Web Shop at https://www.yankeeweb.com/webshop.html and can be reached at: [email protected].
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. OTHER VOICES: Fighting (with) Hierarchies - Part I: Basics, Web Site Compression
* Fighting (with) Hierarchies - Part I: Basics
Hierarchies are a way to structure complex systems. Despite their ubiquity, many users are not as experienced with hierarchies as some developers might believe. This series sheds some light on the problems users have with hierarchies and offers some ideas to present them more clearly. https://www.sapdesignguild.org/community/design/hierarchies.asp SAP Design Guild, Mar. 9, 2002
* Web Site Compression
As IT professionals try to reduce the cost of operating Web sites, they should consider reducing the amount of bandwidth usage. Learn how to successfully compress HTML output and save money on monthly bandwidth. https://www.15seconds.com/issue/020314.htm 15 Seconds.com, Mar. 14, 2002
/-------------------------------------------------------------------\
Nanotech Planet Spring 2002 Conference & Expo coming to CA! Sign up today for the hottest upcoming event on the business of nanotechnology May 13-15 in San Jose. At Nanotech Planet Spring 2002 you'll get the latest news and developments, understand the current applications, and learn where this technology will take biomedicine, materials science, optics & microelectronics. Talk nanotech with companies, labs, VC firms & Gov't agencies. https://events.internet.com/nano/spring02/
\--------------------------------------------------------------adv.-/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3. NET NEWS: AOL testing new, improved Netscape, Mozilla 0.9.9 Released
* AOL testing new, improved Netscape
AOL Time Warner's flagship AOL Internet unit is expected to start testing soon a Web browser using the guts of its Netscape technology, a source close to AOL said on Wednesday, opening up the possibility that the media giant plans to drop rival Microsoft's Internet Explorer. https://zdnet.com.com/2100-1105-859732.html ZDNet.com, Mar. 14, 2002
* Mozilla 0.9.9 Released
In a related story, the Mozilla crew released version 0.9.9 on Monday. Highlights include MathML support, the JavaScript debugger now has a profiler for optimizing your code, and more powerful methods of disabling popup windows. https://www.mozilla.org/releases/mozilla0.9.9/ Mozilla.org, Mar. 11, 2002
That's it for this Thursday, see you next time.
Andrew King Newsletter Editor, WebReference.com aking at internet dot com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ARE YOU BABYSITTING YOUR EMAIL LIST SERVER SOFTWARE? Upgrade to Lyris ListManager From The Experts at SparkLIST, Save Money, and Remove Headaches With Our Free Installation Assistance Offer:https://SparkLIST.com/solutions/software/intm/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Advertising: If you are interested in advertising in our newsletters, call Claudia at 1-203-662-2863 or send email to [email protected] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit https://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or send email to [email protected] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit https://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 160 Web sites is organized into 16 channels: Internet Technology https://internet.com/it E-Commerce/Marketing https://internet.com/marketing Web Developer https://internet.com/webdev Windows Internet Technology https://internet.com/win Linux/Open Source https://internet.com/linux Internet Resources https://internet.com/resources ISP Resources https://internet.com/isp Internet Lists https://internet.com/lists Download https://internet.com/downloads International https://internet.com/international Internet News https://internet.com/news Internet Investing https://internet.com/stocks ASP Resources https://internet.com/asp Wireless Internet https://internet.com/wireless Career Resources https://internet.com/careers EarthWeb https://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - https://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - https://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp https://internet.com - The Internet & IT Network Copyright (c) 2002 Jupitermedia Corp. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: https://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Find a programming school near you