Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

122
Visualizações
Selecting elements with regular javascript within a set of coordinate in vanilla javascript?

Get element at specified position - JavaScript

This question only answers for a particular x and y point, but I would like to select all elements within a rectangle defined by 4 x and y points and be then able to only select elements with a certain classname, the classname could be "selectable". Is there a way to do this in regular javascript? What's the most efficient way to do this?

I was thinking about calling document.elementsFromPoint(x, y) repeatedly, but because the x and y arguments are not integers, I would have to call it an infinite number of times.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I think i made an answer. Though I haven't tested it much.

First a description of the program. The program recursively goes through the dom starting from the body element and tests to see if it is entirely inside the query rectangle. My code assumes that elements wont be found outside of there parents, but if you don't want to assume this delete the marked lines.

// 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;
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda