Recorriendo el árbol DOM para mostrar información sobre el parentNode

Question

Creo que esto debería ser un problema fácil, pero por desgracia me encuentro atascado. Lo que estoy tratando de hacer es configurar una forma para que cada vez que haga clic en una celda en una tabla (o en cualquier otro lugar), se muestre el parentNode de cada elemento, básicamente atravesando el árbol DOM. Pensé que necesitaría usar elem.parentNode, pero estoy atrapado en la parte transversal. Cualquier gurú por ahí que pueda ayudarme, sería muy apreciado.

Answer 1

var element; //your clicked element 
while(element.parentNode) { 
    //display, log or do what you want with element 
    element = element.parentNode; 
} 

Answer 2

var tables = document.getElementsByTagName('table'); 
for (var i=0,len=tables.length;i<len;++i){ 
    tables[i].onclick = function(evt){ 
    if (!evt) evt = window.event; 
    var element = evt.target || evt.srcElement; 
    while (element){ 
     console.log(element); 
     element = element.parentNode; 
    } 
    }; 
} 

Si realmente quiere hacer clic en cualquier elemento en todas partes, entonces simplemente:

document.body.onclick = function(evt){ 
    if (!evt) evt = window.event; 
    var element = evt.target || evt.srcElement; 
    while (element){ 
    console.log(element); 
    element = element.parentNode; 
    } 
};