JavaScript Workshop » DOM

Chris Heilmann created a nice DOM Cheatsheet (.pdf) to help all us would-be JavaScript developers.

The visibilty of an element is a powerful tool that can be used in JavaScript to create everything from animations and effects to fast templating. More importantly, however, it can also be used to quickly hide an element from view, providing users with some basic user interaction capabilities.

Within CSS there are two different ways of effectively hiding an element from view; both have their benefits but can provide unintented consquences, depending on how you use them:

(read more...)

Every element in a document is an object. Every one of these objects has a whole collection of properties as we have discussed in previous meetings. There's one property called style which every element node has. It contains information about the styles attached to the element. Querying this property doesn’t return a simple string, it returns an object. Style information is stored as properties of this style object:

element.style.property

(read more...)

Many sites that present tabular data use alternating background colors to increase the readability of that data. The obvious solution is to hardcode every second row to ensure it had a different background color. But if you want the table to be dynamic, meaning that it would be possible to add a new row in the middle of the table without changing the background color attribute of the rows that followed requires a little JavaScript.

(read more...)

Modifying your markup can be as easy or as difficult as you want. Using the innerHTML or the W3C DOM methods such as createElement, appendChild and insertBefore can allow you to manipulate anything on your web page to create some very interesting effects. These techniques allow you to further enhance the user's web experience and are part of truly creating interactive content.

(read more...)

Should you use popup windows? Popup windows have gained a bad reputation from marketers' aggressive use of them, but even requested popups can be barriers to good usability. There are situations where popping a new window is arguably the most appropriate solution. Popups are mostly used for one-page interfaces or those in which history navigation is discouraged, such as a survey or a logon page for a commercial web site.

My use for external windows (not popups) use scripting that degrades if not available. We have already discussed this issue at our unobtrusive discussion.

(read more...)

One way to enhance a table style is to introduce a hover effect on the table rows: when the user is moving across the table with their mouse, the current row they are on will change color.  This is something that you frequently see in interface design in internal web applications which help users view a particlar row of data.

(read more...)

As we have started to learn about the DOM this season, one thing that is an issue when developing your scripts is knowing when you can have your scripts execute. Remember, the DOM is available to you only when it has finished loading in the browser. You may ask, when has it finished loading? Good Question!

(read more...)

Children, parents and siblings decribe the relationships for the current element in the DOM tree and whether it contains other elements or not.  Every node in the document has several properties such as nodeType which describes what the node is and nodeName which is the name of the elementor and finally nodeValue which is the value of the node, null if it is an element.

(read more...)