So, as I've mentioned, I've been living and breathing Javascript recently. Which, for a database systems developer with a very solid knowledge of Java is just relatively depressing.

So, here's my Javascript advice for those other googling developers trapped in the hell that is Javascript: NEVER, EVER use getElementsByClassName if any user of yours will be using Internet Explorer.

First, if you try treeElement.getElementsByClassName on any element of the tree but document, you get this lovely error message from Internet Explorer: Not Implemented. Okay, not a don't-know-what-the-fuck-you're-doing error, but a know-what-you're-doing-and-our-engineers-decided-not-to-implement-it error.

Second, a good way to LAG Internet Explorer is to call document.getElementsByClassName on a heavily populated DOM tree. Oh my god, that must be the slowest provided operation possible in the current browser world. In our system, it can take a full second or MORE for the browser to respond again once it hits that function.

Since I have spent days coding around every instance of document.getElementsByClassName in our system, here are my recommended alternatives.

If you know the parent element of the element(s) you're looking for, get the parent element by ID, and loop through the childNodes looking for the desired className.

Example:

	var parentDiv = document.getElementById(id)
	for (var i = 0; i<parentDiv.childNodes.length; i++)
	{
		if (parentDiv.childNodes[i].className == "ClassName")
			parentDiv.childNodes[i].className = "OtherClassName";
	}

Yes, you are basically implementing treeElement.getElementsByClassName here. A bit more thought, and you'll have your own implementation!

This slows down Firefox just slightly over its internal implementation of treeElement.getElementsByClassName, but it is far, far more responsive in IE than document.getElementsByClassName.

treeElement.getElementsByTagName actually does work in Internet Explorer. So, that's another possible solution: if all the elements you want have the same tag ("div" for example), grab them using the parent element and do whatever you need.

Tags: coding, javascript