[Javascript] finding an element in the DOM sea

[Jonathan Gold]

Never mind... I think. I found out what was messing up my intention.
My style sheet sets the background color for these elements to be
white. This is weird. THe only reason I set the background-colors on
the separate elements at all was that the CSS-Validator encourages to
set the bg color if you have set the color. Here I need to set the
color to help the semantic of the page; but it looks like I better not
set the background color on the separate elements until Ilearn how to
change a style sheet from javascript. ;-)

Thanks for your help; it's been fun navigating the DOM anyway.

On 1/30/06, Jonathan Gold <johnnyclock at gmail.com> wrote:
> 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/
>


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