如何获取特定元素中的DOM元素？

Question

我想做什么

我想获取特定元素.main的高度中心，并获取在那里的DOM元素。

---

我尝试过的

我认为我可以使用elementFromPoint()获得DOM元素。

①

// 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元素。

---

我想使用caretPositionFromPoint()，但是由于对浏览器的支持很少，所以这是不可能的。

问：有没有更好的方法来在 specific 元素中获取DOM元素？

Answer 1

您获得的是高度和宽度中心，但没有添加main从文档的左侧和顶部的偏移量

通过将您的演示调整为以下内容，我发现元素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