...

View Full Version : referring to html elements inside divs



marilynn.fowler
12-18-2006, 11:52 PM
<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;

koyama
12-19-2006, 12:29 AM
Hi marilynn.fowler:)
Well, if you are absolutely certain that there aren't other <ul>'s in your document. Try this:


<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


document.getElementsByTagName('ul')

is an array, hence append the [0] like above.

marilynn.fowler
12-19-2006, 01:24 AM
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?

vegu
12-19-2006, 01:47 AM
Is the ul the first element in the div?

if so could do



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'

koyama
12-19-2006, 02:33 AM
...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)


<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.


<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...

vegu
12-19-2006, 02:36 AM
<- in austria ;D like 3 am hehe

Arbitrator
12-28-2006, 06:50 AM
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].

koyama
12-28-2006, 06:58 AM
Thanks Arbitrator...
Your way is much better. I think I was tired that day...:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum