DOM Applied | JavaScript: The Complete Reference, Second Edition

You might wonder what to do with the DOM properties. There are numerous applications possible, for example, creating pages that allow the user to dynamically toggle between languages or presentations. This small example demonstrates this idea in a simple form.

 <<form action="#" method="get">> Say Hello in:  <<select onchange="document.getElementById('thephrase').firstChild.data =  this.options[this.selectedIndex].value;">>       <<option value="Hello">>English<</option>>       <<option value="Bonjour">>French<</option>>       <<option value="Hola">>Spanish<</option>> <</select>> <</form>> <<div id="thephrase">>Hello<</div>>

Note	We could have used the *innerHTML* property commonly supported in most 6.x browsers, but we opted for the full DOM approach here.

Of course, we could have made the whole page rewrite itself for the language selected, but the idea should be clear enough.

You could also apply a similar idea to selecting a style sheet for the page, as demonstrated here.

 <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <<html xmlns="http://www.w3.org/1999/xhtml">> <<head>> <<title>>Style Switcher<</title>> <<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />> <<link id="styleLink" rel="stylesheet" href="red.css" type="text/css" />> <</head>> <<body>> <<script type="text/javascript">> <<!--  function changeStyle(userStyle)   {    document.getElementById('styleLink').href=userStyle;   } //-->> <</script>> <<h1>>Go ahead and change my style!<</h1>> <<form action="#" method="get">> Change Style:       <<select onchange="changeStyle(this.options[this.selectedIndex].value);">>             <<option value="red.css">>Red Style 1<</option>>             <<option value="white.css">>White Style 2<</option>>             <<option value="blue.css">>Blue Style 3<</option>>       <</select>> <</form>> <</body>> <</html>>

There are also many possibilities with dynamic tables. Consider sorting cells when a user clicks on a column header. You might even provide a spreadsheet-like interface where the user can click on a cell and modify it. Given that every aspect of the page is changeable , it is really up to you to figure out what to do with the DOM. The next few chapters will present some common uses of both traditional and modern Document objects including form validation, page effects such as mouseovers, and navigation systems.