Table of Content:
- The DOM - What is it?
- How The DOM Works
- document.getElementById()
- getElementsByTagName()
- Adding Dynamic Content
- The Script
- A New Twist
- createElement()
- createTextNode()
- Stepping Through
- appendChild()
- Wrapping it Up
- Conclusion
DHTML: Introduction to Scripting the DOM
Web lore has it that the DOM an off-putting, complicated and esoteric subject. However, the heart of the DOM is pretty straightforward.
Simply put, the DOM allows you to dynamically change the page all on the client side. We're not talking simple text color changes here, either. Want to add a whole table to your page? Go ahead and create one. Want to re-style every DIV on the page? Go ahead and do it. It will all happen at the click of a button, and it will all happen without sending the page back to the server. One seamless and smooth action that puts the punch in dHTML.
In this tutorial (which is suitable for beginners) Tom Dell'Aringa introduces the central concepts of the DOM and immediately gets his hands dirty, using JavaScript to alter the appearance and content of a page on the fly.
http://www.maroonedcomic.com/