Saltar al contenido

Obtener padre abuelo hijo y familia de un elemento mediante javascript

21 marzo, 2013

Hoy os presento un código muy interesante que nos servirá en múltiples ocasiones, se trata de como bien indica el título del post “Obtener padre abuelo hijo y familia de un elemento mediante JavaScript”, el ejemplo os lo voy a explicar con una lista de elementos:

<ul class="clasedelpadre clasehijo masclases" id="ulpadre">    	
    	<li id="1">
        	<ul id="2">
            	<li id="3">
                    <span id="4">
                        <a href="#" title="padre" id="hijo" >hijo</a>
                    </span>
                </li>
            </ul>
        </li>
    </ul>

El ejemplo consta de un código de JavaScript que muestra unos mensajes para que veamos cómo se accede a cada elemento.

alert("Id del hijo del elemento con id ulpadre : "+document.getElementById('ulpadre').getElementsByTagName('LI')[0].id);
		alert("tag abuelo del elemento hijo con id hijo :"+document.getElementById('hijo').parentNode.parentNode.tagName);
		var padre=document.getElementById('hijo').parentNode;
		alert("recorremos la lista de elementos");
		while( padre.id != "ulpadre" ){
			if(padre.tagName=="LI"){
				alert("estoy en el li :"+ padre.id);
				padre.className+="claseli";
			}
			if(padre.tagName=="UL"){
				alert("estoy en el ul :"+padre.id);	
				padre.className+="claseul";			
			}
			padre=padre.parentNode;
		}		
		alert("estoy en el ul :"+padre.id+"  "+padre.className);

Espero que os sea útil este código, podéis ver el funcionamiento pinchando aquí.