Acceder a un ul determinado... Mediante DOM en esta lista...

[yoguuu]

Hola gente :)

En una lista como la que sigue... Como harian con javascript y el DOM para poder manejar de alguna manera el <ul> que contiene las subcategorias ? mi intención es hacer que cuando se lanze la "funcion();" del evento onclick poder manejar ese ul... para hacerlo desaparecer o aparecer...

Código:

<ul>
	<li><a href="#" onclick="funcion();">Categoria 1</a></li>
	<ul>
		<li>subCategoria 1</li>
		<li>subCategoria 2</li>
		<li>subCategoria 3</li>
		<li>subCategoria 4</li>
	</ul>
</ul>

Hacer que aparezca o desaparezca es facil... lo que no sé es como mediante los objetos del DOM llegar a manejar ese elemento... Creo que lo ideal... seria poder llegar al segundo ul con getElementsByTagNames(); Lo malo es ke de momento soy incapaz... no sé usarlo... a ver si podeis ayudarme...

Muchas gracias
Seguiré buscando por San Google de mientras... ;)

[caricatos]

Hola:

El árbol del documento se puede recorrer desde el elemeto raíz (document.documentElement), pero cuando el nodo referente no tiene nada que lo pueda discriminar, se hace difícil una selcción/búsqueda...

Si le pones un id al tag padre (una de tantas opciones) puedes obtener todos los nodos hijos o todos los hijos con características especiales...

con:
<ul id="miLista" >
puedes obtener sus elementos li descendentes con:
document.getElementsById("miLista").getElementsByT agName("li")... pero si hay anidamiento de tags se puede obtener un descendiente indirecto (nieto, bisnieto...)...

Otra posibilidad es obtener los descendientes directos (childNodes) y luego ver por ejemplo su tagName... o desde el sistema anterior averiguando su papi... parentNode.

Saludos

[yoguuu]

Mhmm me ha venido bastante bien lo que me has dicho... lo de los childNodes sobretodo...

Ahora selecciono todos los ul anidados que cuelgan de la id="lista" (el ul que los anida), aunque yo lo que quiero hacer es seleccionar los ul por separado cuando se lance el evento onclick... ahora lo que me importa es que ya se seleccionar un elemento recorriendo el arbol de elementos...

Lo que he pensado para seleccionar solo uno... es seleccionar el textNode o valueNode (no sé cual de los dos deberia ser) y asignarselo como id a cada ul... asi me seria mas facil manejarlo... o tambien... como voy a usar php... pasarle la id aprovechando una consulta que ya se hacia...

con esa id podria manejar cada ul por separado... si a alguien se le ocurre algo mejor... ×_× Acepto sugerencias jejeje :)

Código:

<!-- Parte del Head -->
<script language="javascript" type="text/javascript">
function funcion() {
	if (document.getElementById && document.createElement) {
		node = document.getElementById('lista');
		for (i = 0; i < node.childNodes.length; i++) {
			ul = node.childNodes[i];
			if (ul.nodeName == "UL") {
				if (ul.style.display != "none") {
					ul.setAttribute('style','display: none;');
				} else {
					ul.setAttribute('style','display: block;');
				}
			}
		}
	} else {
		alert('Sin soporte DOM :P');
	}
}
</script>


<!-- Parte del Body -->
<ul id="lista">
	<li><a href="#" onclick="funcion();">Categoria 1</a></li>
		<ul>
			<li>subCategoria 1</li>
			<li>subCategoria 2</li>
			<li>subCategoria 3</li>
			<li>subCategoria 4</li>
		</ul>
	<li>Categoria 2</li>
		<ul>
			<li>subCategoria 1</li>
			<li>subCategoria 2</li>
			<li>subCategoria 3</li>
			<li>subCategoria 4</li>
		</ul>
</ul>

Chao y Gracias !!! :)