<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Chris Miller &#187; getElementsByClass</title>
	<atom:link href="http://chris-miller.org/archives/tag/getelementsbyclass/feed/" rel="self" type="application/rss+xml" />
	<link>http://chris-miller.org</link>
	<description>Life, and how to live it!</description>
	<lastBuildDate>Tue, 24 Jan 2012 14:41:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Get multi-class elements in JavaScript</title>
		<link>http://chris-miller.org/archives/2008/10/02/get-multi-class-elements-in-javascript/</link>
		<comments>http://chris-miller.org/archives/2008/10/02/get-multi-class-elements-in-javascript/#comments</comments>
		<pubDate>Thu, 02 Oct 2008 20:35:49 +0000</pubDate>
		<dc:creator>Chris</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[class]]></category>
		<category><![CDATA[getElementsByClass]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[multi-class elements]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://chris-miller.org/?p=184</guid>
		<description><![CDATA[As any person who uses JavaScript for client side interaction knows, getting elements by their class is one essential thing we need to do over and over again. For the most part using a function equivalent to the one shown below will do. Code Snippit 1: Simplistic getElementsByClass() JavaScript method function getElementsByClass( className ) { [...]]]></description>
			<content:encoded><![CDATA[<p>As any person who uses JavaScript for client side interaction knows, getting elements by their class is one essential thing we need to do over and over again.  For the most part using a function equivalent to the one <a href="#get-multi-class-elements-in-javascript_snippit1" title="Simple getElementsByClass()" onmouseover="document.getElementById('get-multi-class-elements-in-javascript_snippit1).style.borderColor = '#2266aa';" onmouseout="document.getElementById('get-multi-class-elements-in-javascript_snippit1').style.borderColor = '#d6d6d6';">shown below</a> will do.</p>
<div id="get-multi-class-elements-in-javascript_snippit1" class="code_header">
<p>
<strong>Code Snippit 1</strong>: Simplistic getElementsByClass() JavaScript method
</p>
<pre class="javascript" name="code">
function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        if (all[e].className == className) {
            elements[elements.length] = all[e];
        }
    }
    return elements;
}
</pre>
</div>
<p>This function basically checks the string that is entered into the class attribute for each HTML element and returns all elements where there is an exact match.</p>
<p>This method will fail however if we're trying to select elements that have multiple class associations.  We need to use something more complex when, for example, creating a list of items that are filterable by class when arranged in overlapping groups.  Splitting the class attribute on space characters will allow us to check for matches in these cases:</p>
<div id="get-multi-class-elements-in-javascript_snippit2" class="code_header">
<p>
<strong>Code Snippit 2</strong>: More advanced getElementsByClass() function
</p>
<pre class="javascript" name="code">
function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        var classes = all[e].className.split(/\s/g);
        for( var c = 0; c < classes.length; c++ ) {
            if( classes == className ) {
                elements[elements.length] = all[e];
            }
        }
    }
    return elements;
}
</pre>
</div>
<p>The <a href="#get-multi-class-elements-in-javascript_snippit2" title="Advanced getElementsByClass()" onmouseover="document.getElementById('get-multi-class-elements-in-javascript_snippit2).style.borderColor = '#2266aa';" onmouseout="document.getElementById('get-multi-class-elements-in-javascript_snippit2').style.borderColor = '#d6d6d6';">function above</a> does pretty much the same as the first one, however splits the class attribute string on the spaces and loops through them, trying to match the parts individually.  This should match on elements with singular and multiple class names associated with them and solve any problems with multiple classed elements.<br />
- Chris</pre>
]]></content:encoded>
			<wfw:commentRss>http://chris-miller.org/archives/2008/10/02/get-multi-class-elements-in-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

