Blogs about javascript from Pew Pew Laser Blog

getElementsByClass.

You know about getElementById(), and getElementsByTagName(), but what about getting elements by class?

Yes, there is a native JavaScript function getElementsByClassName(). It is supported by FF3+, Safari 4+, Chrome 4+, Opera 10+, but not IE6, IE7, or IE8.

Here's a simple way to take action on all elements with a given class:

For the HTML shown, the JavaScript creates an array of all elements with a given tag name. A for loop checks the class of each element in the array, and performs some action on that element if its class matches. (If your class occurs on multiple types of elements, just specify "*" for the class name. )

This is a pretty good solution for just a few lines of code. For much more flexibility a just a few lines of code more, Dustin Diaz has written his own getElementsByClass function.

Selecting Children in the DOM.

Sometimes, it's necessary to use JavaScript to walk through the HTML elements on a page. The function childNodes() function (as well as firstChild, lastChild, and previousSibling) seems like a great great way to to this. Unfortunately, it'll produce vastly different results in different browsers.

Firefox evaluates any white space in the element as a text node, so if your HTML is like this: <div id="theDiv"> <a href="http://www.wired.com" id="theA">Wired</a> </div> then firstChild will be the line break. Other browsers will return the anchor element as the firstChild. Blech.

Instead, use getElementsByTagName("*"), which will get only tags. For the above HTML, this JavaScript will get the link value: theAnchor = document.getElementById("theDiv").getElementsByTagName("*")[0]; theHref = theAnchor.getAttribute("href"); Since the first element inside theDiv is the anchor.

Yo Dawg, I Heard You Liked Working jQuery in Your Webpages.

My first version of a script to show and hide extra list items didn't work with the recent update to version 1.4.2 of the jQuery JavaScript library. I've finally finished an update to this script that works, and is tidier to boot. Enjoy!

Dynamically Adding a JavaScript Element.

This bit of JavaScript will allow you to dynamically add a JavaScript element (which will execute) into a document's head.

First, we prepare a new script element using createElement(). We then create the text that will be our executing JavaScript, and insert it into the script element. Last, we append the new script element to the end of the first head element in the document.

Why would we want to use JavaScript to edit the HTML to add JavaScript? Clients.

Appending an External JavaScript File.

This basic bit of JavaScript will allow you to dynamically append an external JavaScript file to an HTML document.

First, we prepare a new object using createElement(). Then, we append the new object to the end of the first (and, hopefully, only) head element in the document.