Performing Batch DOM Operations Using jQuery

WEBINAR:On-Demand

One of the best features of jQuery is its extensive collection of Document Object Model (DOM) methods. They make dynamically updating the DOM easier than ever. But what makes them really great is their ability to be applied to multiple objects at once (thanks to CSS selectors) and modify multiple object attributes within one function call. Together, these features go a long way towards explaining jQuery's dominance in this area. In today's article, we'll explore how to use jQuery's DOM functions to perform batch operations.

Modifying Image Paths

A common question of web developers is how to change the src property of all the images in a page without iterating over every one. Thanks to jQuery's versatile attr() function, you don't have to. It's a member of the jQuery DOM object, which means that it can be applied to both single or multiple elements. A lot of the time, selecting elements using anything other than by their unique ID will retrieve multiple elements. In the case of images, the $("img") selector will return every image on the page.

To derive a new src value based on the existing one it's best to use the signature that accepts the attribute name and a function. That gives us access to the current value so that we may perform operations with it. Here's an example music page that contains relative paths to the image sources. This is often the result of reading the data from either a feed or from another file via Ajax.

Setting Multiple Attributes at Once

In addition to setting the attributes of multiple elements at once, you can also set multiple attributes on each element as well. That's done by passing an object literal to the attr() function. Each name/value pair inside the object designates the attribute and the value to set it to. Further more, values may be any kind of valid object, including functions. Here's a modified version of the code above that also sets the width and height attributes of each image on the page:

Setting Element Styles

Most DOM object methods possess the same signatures so whatever works for one will probably work for another. For instance, we can apply styles to multiple elements just as we did above for attributes.

Note that the attribute names within the map argument may be quoted or not. Doing so refers to the CSS names, whereas omitting the quotes denotes JavaScript naming. The former uses dashes to separate name parts while JS naming uses camelCase. Hence, the CSS "margin-top" property would be written as marginTop without quotes.

Chaining DOM function Calls

jQuery DOM methods always return the object that's being worked on, allowing for methods to be called successively - a construct known as method chaining. For instance, here's some code that combines both the above operations by simply invoking the call to css() directly on the results of the attr() call:

Appending an Array of jQuery Objects

Strangely, jQuery can be utilized to append an array of document elements or fragments to the DOM, but not an array of jQuery objects. Doing so will throw an error such as "Uncaught Error: NOT_FOUND_ERR: DOM Exception" on Chrome or "Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]" on Firefox.

The solution, as described by Ben Nadel is to unwrap each DOM node before appending them. While that may sound like a tall order, Mr. Nadel has incorporated his solution into a function that can be added to jQuery so that it may be called just like any other native jQuery function.

Conclusion

jQuery's collection of DOM methods allow you to execute the kind of dynamic page creation that could once only be achieved via server-side tehnologies. Nonetheless, if you ever find it lacking in spots, you can always retrieve the raw DOM element so that you can utilize its own properties and methods. Between the two, there are almost no DOM operations that can't be done.

Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. EmailRob to receive a free estimate on your software project.

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

IT Solutions Builder
TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

Which topic are you interested in?

Mobile

Security

Networks/IoT

Cloud

Data Storage

Applications

Development

IT Management

Other

What is your company size?

What is your job title?

What is your job function?

Searching our resource database to find your matches...

Web Development Newsletter Signup

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.

Thanks for your registration, follow us on our social networks to keep up-to-date