Tengo un documento HTML y está estructurado de la siguiente manera:
<div id="oa2"> Content <div> Content <div> . . . </div> </div> </div>Y la cadena de elementos puede ser arbitrariamente profunda. Cuando hay un clic en la pantalla, lo recojo e intento obtener la cadena de custodia parental para el elemento en el que se hizo clic usando el siguiente JavaScript:
let a=document.getElementById("oa2"); let c=[]; let d=[]; let i=[0,0,0,0]; document.onclick=function(e){ let b=e.target; while(b){ let f=b.childNodes; if(b==(a||document.body)){break;}; if(!d.includes(b.id)){d[i[0]]=b.id;i[0]++;}; while(i[3]<f.length){ if(f[i[3]].nodeType==Node.TEXT_NODE) {c[i[1]]=[];c[i[1]][i[3]]=f[i[3]].nodeValue}; i[3]++; }; b=b.parentElement; }; i[1]++; i[3]=0; }; Para ser claros, lo que quiero es una matriz ( c ) que contenga matrices que contengan la "ruta" del contenido de un elemento secundario y el contenido del contenido de cada elemento principal sucesivo. Cada vez que se hace clic en el documento, quiero una nueva matriz secundaria en c que contenga la "ruta" del elemento en el que se hizo clic, sin duplicados (me encargué de eso con d ).
Puede tener un ciclo while que verifique el elemento principal del objetivo en cada iteración y obtenga una matriz de la ruta.
document.onclick = e => { let element = e.target const path = [] while(element) { path.push(element) element = element.parentElement } console.log(path) }También puede verificar la propiedad de la ruta del evento en Chrome y Firefox (Safari también la tiene, pero es algo diferente)
https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath