Как получить элементы DOM в конкретном элементе?

Question

Что я хочу сделать

Я хочу получить центр высоты определенного элемента .main и получить элемент DOM, который там есть.

---

Что я пытался

Я думал, что смогу получить элемент DOM с elementFromPoint().

①

// Get the center of the height of .main
const rect = document.getElementsByClassName("main")[0].getBoundingClientRect();
const mainHCenter = rect.height / 2;
const mainWCenter = rect.width / 2;

// Get the element at the center of the height of .main
var centerElm = document.elementFromPoint(0, mainHCenter);

②

// Get the center of the height of .main
const main = document.querySelector(".main");
const centerY = main.offsetHeight / 2;
const centerX = main.offsetWidth / 2;

// Get the element at the center of the height of .main
const element = document.elementFromPoint(centerX, centerY);

Но в любом случае извлеченный элемент DOM был не таким, как ожидалось.
Очевидно, elementFromPoint(), кажется, получает элементы DOM на основе viewport .

---

Я хотел использовать caretPositionFromPoint(), но при небольшой поддержке браузера это невозможно.

Q. Есть ли лучший способ получить элементы DOM в конкретном элементе?

Answer 1

Вы получаете центры высоты и ширины, но не добавляете смещения для основного слева и сверху документа

Я нашел элемент p.active, настроив ваше демо на:

const rect = document.getElementsByClassName("main")[0].getBoundingClientRect();

const mainHCenter = rect.top + (rect.height / 2);
const mainWCenter = rect.left + (rect.width / 2);
                  // ^^^^^   add left and top offsets


var centerElm = document.elementFromPoint(mainWCenter, mainHCenter);
                                        // ^^^ don't use zero

console.log(centerElm);// returned p.active

DEMO