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