[Javascript] finding an element in the DOM sea

Jonathan Gold johnnyclock at gmail.com
Mon Jan 30 21:46:00 CST 2006


Oh oh! Let me take that back; the span elements still won't change
their background colors even when I've removed the stylesheet command.
What's up with these SPAN elements? A certain <p> element that had the
same problem towed the line after I removed the stylesheet background
color for it. Butnot so these SPANs. Hmmmm.

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


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


More information about the Javascript mailing list