Obtener los nodeValues de todos los elementos padre del elemento.
Tengo un documento HTML y está estructurado de la siguiente manera:
<div id="oa2">
Contenido
<div>
Contenido
<div>
. . .
</div>
</div>
</div>
Y la cadena de elementos puede ser arbitrariamente profunda. Cuando hay un clic en la pantalla, lo registro e intento obtener la cadena de custodia parental del elemento clicado utilizando 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 claro, lo que quiero es un array (c) que contenga arrays que contengan la “ruta” del contenido de un elemento hijo y el contenido de cada elemento padre sucesivo de forma consecutiva. Cada vez que haya un clic en el documento, quiero un nuevo array hijo en c que contenga la “ruta” del elemento clicado, sin duplicados (cuidé de eso con d).
davy.ai
El código JavaScript proporcionado intenta obtener la cadena de custodia parental del elemento clicado en un documento HTML con una cadena de elementos de una profundidad arbitraria.
El código define una función que se activa en cada evento de clic en el documento. Comienza seleccionando el elemento padre más superior con un ID de “oa2” e inicializa tres arreglos: “c”, “d” e “i”.
Luego, recoge el elemento clicado y utiliza un bucle while para recorrer la cadena de elementos padres.
Para cada elemento padre, el código verifica si su ID ya está incluido en el arreglo “d” (que almacena todos los IDs visitados para evitar duplicados). Si no está incluido, se agrega al arreglo “d” en el índice actual “i[0]” y se incrementa “i[0]”.
El código también explora los nodos hijos del elemento padre y agrega cualquier contenido de texto al arreglo “c” en los índices actuales “i[1]” e “i[3]”. “i[3]” realiza un seguimiento del índice del último nodo hijo analizado.
Una vez que se han explorado todos los elementos padres, el código incrementa “i[1]” para pasar al siguiente arreglo de elementos hijos en “c” y restablece “i[3]” a 0 para el nuevo arreglo.
Al final de este proceso, el arreglo “c” debería contener arreglos que contengan la ruta y el contenido de cada elemento hijo para cada evento de clic.
Tenga en cuenta que el código tiene algunos errores lógicos, como el uso incorrecto del operador OR y el manejo incorrecto de los nodos hijos de tipos no textuales.