Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    referring to html elements inside divs

    <div id="newsletter">
    <ul>
    <li>blah blah blah</li>
    <li>blah blah blah</li>
    <li>blah blah blah</li>
    </ul>
    </div>

    in Javascript how do I refer to the ul inside the newsletter div without giving the ul an ID?

    I tried the following, but it doesn't work:
    var myNewsletter= document.getElementById('newsletter') + '.' + document.getElementsByTagName('ul').style;
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hi marilynn.fowler
    Well, if you are absolutely certain that there aren't other <ul>'s in your document. Try this:
    Code:
    <html>
    <head>
    </head>
    <body>
    <div id="newsletter">
      <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
      </ul>
    </div>
    <script type="text/javascript">
    var ulist = document.getElementsByTagName('ul')[0];
    ulist.style.backgroundColor = 'blue';
    </script>
    <body>
    </html>
    Remember that
    Code:
    document.getElementsByTagName('ul')
    is an array, hence append the [0] like above.
    Last edited by koyama; 12-19-2006 at 03:11 AM. Reason: #id should have been id

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Hello, Koyama:
    Thanks for the response. (Isn't it 2 or 3 in the morning there?)

    There are other ULs in the document, but this is the only UL inside the newsletter div. Is there a way to refer to the UL without giving it an id?
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is the ul the first element in the div?

    if so could do

    Code:
    var ulNode = document.getElementById('newsletter').childNodes[0];
    if not you could loop through the div's child nodes until you find a node with nodeName 'ul'
    http://demo.vegui.org - vegUI AJAX framework
    http://www.landsofkazram.com - browser based graphical MMORPG

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    ...exactly as vegu says.

    I would like to add a twist, though. Since vegu's solutions wouldn't be firing in FF unless the <ul> is completely glued up against the <div id="newsletter"> we would have to do the looping method as vegu also mentions.

    When I say glued up, I mean completely glued up, that is no linebreak or whitespace, since this counts as a text node in FF, so we would have to remove this space (not so pleassant)
    Code:
    <div id="newsletter"><ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
      </ul>
    </div>
    We then arrive at something like the code below. Check that we do get the <ul> element in both FF and IE by observing that it gets colored blue. It is even allowed to have elements between the <div id="newsletter"> and the <ul> with this method.

    It seems that there should be an easier way to handle this simple task, but I wouldn't know the answer if we want cross-browser compatibility.
    Code:
    <html>
    <head>
    </head>
    <body>
    <div id="newsletter">
      <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
      </ul>
    </div>
    
    <script type="text/javascript">
    newsDiv = document.getElementById('newsletter');
    var i=0;
    do {
      candidateNode = newsDiv.childNodes[i++];
    }
    while((candidateNode.nodeType != 1) && (candidateNode.tagName != 'UL'))
    ulElement = candidateNode;
    ulElement.style.backgroundColor = 'blue';
    </script>
    
    <body>
    </html>
    marilyn: Yes, you are right. It is very late at night for me. Fascinating with us web-addicts...lol...
    Last edited by koyama; 12-19-2006 at 03:36 AM. Reason: typo in script

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <- in austria ;D like 3 am hehe
    http://demo.vegui.org - vegUI AJAX framework
    http://www.landsofkazram.com - browser based graphical MMORPG

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by koyama View Post
    It seems that there should be an easier way to handle this simple task, but I wouldn't know the answer if we want cross-browser compatibility.
    I don’t see why you don’t just use document.getElementById("newsletter").getElementsByTagName("ul")[0].
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Thanks Arbitrator...
    Your way is much better. I think I was tired that day...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •