Cool Tricks with W3C DOM Javascript

Way back in the day, if you wanted to manipulate the content of your HTML document via Javascript, you had to do all sorts of checking to make sure which browser version your user had, and what kind of support it had. Was it a version 4 browser? Did it support layers or divs? Was it Opera, Netscape, Internet Explorer or something else? The resulting scripts were understandably quite complex as just the browser detection took thousands of lines of code.

The idea of the W3C Document Object Model was to give a standard way that all browsers would understand of providing an interactive layer to our web pages. In this tutorial we'll look at the basics of how the W3C Document Object Model works to manipulate how HTML is displayed and built.

Overview

What the W3C DOM Does and How

As stated above, the W3C DOM gives you the facility to manipulate the content of an HTML document once it's arrived in the user’s web browser. Unlike older versions of client-side Javascript manipulation, the W3C DOM allows you to manipulate practically every aspect of a document.

It does this by providing access to the document as if it were a tree structure. The tree is made up of nodes of three types:

Text Nodes – These correspond to text data in our document

Element Nodes – These correspond to HTML elements like <p>, <em> and <div>

Matt Machell

Matt Machell A man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.

He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.

He likes music with loud guitars and games with obscure rules.

His website can be found at: http://www.eclecticdreams.com

He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.

See All Postings From Matt Machell >>

Reviews

Be the first to write a review

You must me logged in to write a review.