Obtener elemento en la posición especificada - JavaScript
Esta pregunta solo responde a un punto x e y en particular, pero me gustaría seleccionar todos los elementos dentro de un rectángulo definido por 4 puntos x e y y luego poder seleccionar solo elementos con un cierto nombre de clase, el nombre de clase podría ser "seleccionable" . ¿Hay alguna manera de hacer esto en javascript normal? ¿Cuál es la manera más eficiente de hacer esto?
Estaba pensando en llamar a document.elementsFromPoint(x, y) repetidamente, pero debido a que los argumentos x e y no son números enteros, tendría que llamarlo una cantidad infinita de veces.
Creo que hice una respuesta. Aunque no lo he probado mucho.
Primero una descripción del programa. El programa recorre recursivamente el dom comenzando desde el elemento del cuerpo y prueba para ver si está completamente dentro del rectángulo de consulta. Mi código asume que los elementos no se encontrarán fuera de sus padres, pero si no quiere asumir esto, elimine las líneas marcadas.
// first some helper functions function isRecPartialyInside(inside, outside){ if((between(inside.xmin, outside.xmin,outside.xmax) || between(inside.xmax, outside.xmin,outside.xmax ) && (between(inside.ymin, outside.ymin,outside.ymax) || between(inside.ymax, outside.ymin,outside.ymax )))){ return true; } return isRecFullyInside(outside, inside); } function between(x, min, max){ return x > min && x < max; } function clientRecToRec(clientRec){ return {xmin: clientRec.x, xmax:clientRec.right, ymin: clientRec.y, ymax: clientRec.bottom}; } function isRecFullyInside(possiblyInside, possiblyOutside){ return (possiblyInside.xmin > possiblyOutside.xmin && possiblyInside.xmax < possiblyOutside.xmax && possiblyInside.ymin > possiblyOutside.ymin && possiblyInside.ymax < possiblyOutside.ymax); } function isClientRecFullyInside(clientRec, rec){ let crec = clientRecToRec(clientRec); return isRecFullyInside(crec, rec); } function isClientRecPartiallyInside(clientRec,rec) { let crec = clientRecToRec(clientRec); return isRecPartialyInside(crec, rec); } // here is the real deal function elementsFromBox(x1,x2,y1,y2){ let output = []; let boundsRec = {xmin:x1,xmax:x2,ymin:y1,ymax:y2}; let curr = document.body; let stack = []; let frame = {index:0,list:[curr]}; stack.push(frame); while(stack.length > 0){ let currFrame = stack.at(-1); if(currFrame.index >= currFrame.list.length){ stack.pop(); continue; } let currEl = currFrame.list[currFrame.index]; currFrame.index +=1; // Check if the element is fully inside. If so report if(isClientRecFullyInside(currEl.getBoundingClientRect(), boundsRec)){ output.push(currEl); } if(isClientRecPartiallyInside(currEl.getBoundingClientRect(), boundsRec)){ // del stack.push({index:0,list:currEl.children}); continue; } // del } return output; }