[Javascript] finding an element in the DOM sea

Jonathan Gold johnnyclock at gmail.com
Tue Jan 31 01:58:39 CST 2006


Thanks for the references, Paul.

I got the thing working without using the class attribute, but thanks
for the function which I'll save for when I need it.

Jonathan

On 1/30/06, Paul Novitski <paul at novitskisoftware.com> wrote:
> At 08:58 PM 1/30/2006, Jonathan Gold wrote:
> >2. Obviously I have fallen (in a short time really: can't be more
> >than 3-4 years) into, as you put it, the _old_ school. Is there a
> >text(s) that you could recommend that would put me up to speed again?
>
> Gecko DOM Reference
> http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
>
> Core JavaScript Guide
> http://www.croczilla.com/~alex/reference/javascript_guide/
>
>
> >1. I can get elements by ID or by TagName. Can I retrieve them by
> >Class. I tried but couldn't get it.
>
> There's no direct method for collecting elements by class in
> JavaScript/DOM, but you can accomplish it by searching through all
> the page elements examining their classNames.  Here's my function for
> doing this:
>
> //=========================
> function getElementsByClassName(argClassName, argTagName)
> //=========================
> // pass:        argClassName = class you're seeking
> //              argTagName = [optional] tag name to limit search
> //
> // returns: array of matching elements
> {
>          // we'll be searching for the requested class name,
>          // optionally bracketed by spaces to handle multiple classes
>          var reClassMatch = new RegExp("(^| )" + argClassName + "( |$)");
>
>          // prepare to return the results in an array
>          var aResult = new Array();
>
>          // default = search all page elements
>          var sTagName = "*";
>
>                  // if one tag was requested, limit the search
>                  if (argTagName) sTagName = argTagName;
>
>          // get array of all elements [with matching tag if requested]
>          var aEls = document.getElementsByTagName(sTagName);
>
>          // collect elements with matching classNames
>          for (var iEl=0; iEl < aEls.length; iEl++)
>          {
>                  if (reClassMatch.test(aEls[iEl].className))
>                  {
>                          aResult[aResult.length] = aEls[iEl];
>                  }
>          }
>
>          // return array of found elements or null
>                  if (aResult.length == 0) aResult = null;
>          return aResult;
> }
>
> You can use it like so:
>
>          // get all SPANs with the className "frog"
>          var aSpans = getElementsByClassName("frog", "span");
>
>          // get all page elements (any tag) with the class "button"
>          var aButtons = getElementsByClassName("button");
>
>                  // check for results
>                  if (!aButtons) alert("No button class found");
>
> Regards,
> Paul
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>


--
Jonathan
Berkeley, CA
http://home.pacbell.net/jonnygee/


More information about the Javascript mailing list