[Javascript] finding an element in the DOM sea

[Jonathan Gold]

Thanks Paul, that is very helpful. But I am still uncertain _what_ to
call things on the page. Really, I just want to know how to address
certain elements. I want the span elements in this case, to allow
their background color to be changed to conform to the rest of the
webpage. I can view the DOM of my page using the FF extension DOM
Inspector. And I find that the node of my span element is named SPAN
and that its parent element is called LI and its parent element is
called UL, then BODY, then HTML, then something called #document. When
I wanted to adjust the background color of the page as a whole, I
simply wrote "document.bgColor = myColor". myColor was a variable that
had already been set as a hex representation of a color. Now I want to
set the background of the span elements to conform. I know this
doesn't work, but just to show what it is I am trying to do, here's a
line I tried:  "document.html.body.ul.li.span.bgColor = myColor;" So
my question is: how do I correctly address Mr. Span so that he will
feel moved to respond to my requests? :~)

On 1/30/06, Paul Novitski <paul at novitskisoftware.com> wrote:

>
> You can walk the DOM this way:
> __________________________
>
> HTML:
>
> <ul id="instructions">
>          <li> ... <span class="xxx"> ...
> __________________________
>
> JavaScript:
>
>          // bail if the browser doesn't support the DOM
>          if (!document.getElementById) return;
>          if (!document.getElementsByTagName) return;
>
> // point to the list
> var oUL = document.getElementById("instructions");
>
> // get an array of the SPAN elements within the list
> var aSpans = oUL.getElementsByTagName("span");
>
> // walk the list
> for (var iSpan = 0; iSpan < aSpans.length; iSpan++)
> {
>          // if this span fits your criteria...
>          if (aSpans[iSpan].className && aSpans[iSpan].className == "xxx")
>          {
>                  do something...
>          }
> }
> __________________________
>
> If you've got a whole whack of spans, only a few of which are ones
> you're interested in, you can add the relevant spans you find to an
> array.  Each element of the array will point to an actual span, so
> you can cycle through the array to examine & modify their classNames,
> adjust their styling, etc., to your heart's content.
>
> The if-test I used above:
>
>          if (aSpans[iSpan].className && aSpans[iSpan].className == "xxx")
>
> means, "if the span has a className and if the className is X" to an
> prevent error if a span doesn't have class at all.  As I recall, this
> extra test isn't necessary if you're using regular expressions to
> test the value of the class name.
>
> Paul


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