[JS] 좌표로 요소(element) 가져오기

 

JavaScript에서 x, y 값으로 요소를 찾을 수 있는 native 함수가 존재합니다. 해당 함수의 이름은 " elementFromPoint "입니다.

const element = document.elementFromPoint(x, y);

 

창 기준 지정된 좌표(x, y) 값에 존재하는 element를 찾아 가장 최상위에 존재하는 요소를 반환하는 함수입니다.

 

• 여러 개의 요소가 존재할 시 최상위에 존재하는 요소를 반환합니다.
• 해당 좌표에 요소가 존재하지 않거나 좌표가 음수이면 null을 반환합니다.
• 해당 메서드는 창 기준 좌표를 사용하기에 창 안에 보이는 영역에게만 작동합니다. 
• pointer-events 속성이 none으로 설정된 요소는 무시됩니다.

 

예시 코드

mousemove 이벤트를 이용하여 움직인 마우스 좌표 값에 존재하는 요소를 감지하여 보여줍니다.

 

 

 

다수의 element 찾기

여러개의 요소를 찾기 위해서는 elementsFromPoint 함수를 사용하면 됩니다.

elementFromPoint와 다른 점은 최상위 요소부터 차례대로 창 기준 좌표에 존재하는 요소들이 정렬되어 반환되는 함수입니다.

const element = document.elementsFromPoint(x, y);