This lessons covers
- Manipulating element class names
- Setting the content of DOM elements
- Getting and setting form element values
- Cloning DOM elements
- Modifying the DOM tree by adding, moving, or replacing elements
Today web developers and designers know better than those of 10 years ago (or even themselves 10 years ago) and use the power given to them by DOM scripting to enhance a user’s web experience, rather than showcase annoying tricks made of blinking texts and animated GIFs. Whether it’s to incrementally reveal content, create input controls beyond the basic set provided by HTML, or give users the ability to tune pages to their own liking, DOM manipulation has allowed many web developers to amaze (not annoy) their users.
On an almost daily basis, many of us come across web pages that do something that makes us say, “Hey! I didn’t know you could do that!” And being the commensurate professionals that we are (not to mention being insatiably curious about such things), we immediately start looking at the source code to find out how they did it. That’s the beauty of the web, where you can see other developers’ code at any time, isn’t it?
But rather than having to code up all that script ourselves, we find that jQuery provides a robust set of tools to manipulate the DOM, making those types of “Wow!” pages possible with a surprisingly small amount of code. Whereas the previous lesson introduced you to working with properties, attributes, and data with jQuery, this lesson discusses how to perform operations on DOM elements to bring them to life and to bring that elusive “Wow!” factor to your pages.
Leave a Reply