Javascript 高效地获取每个DOM元素的偏移量

为了确定页面上不同位置的页边距，我需要得到每个DOM元素的偏移量、宽度和高度

我递归地循环DOM元素并保存每个元素的属性。 我用JQuery

$（el.offset（）

尝试了它，但速度非常慢。我猜使用

$（…）

为每个元素创建JQuery对象非常慢

然后，我尝试了一个旧的实现，它来自一个使用原生JS的旧代码，速度快了4倍

所以我真正想问的是，有没有不同的方法来实现这一点？

---

我应该提到，我的脚本运行在出版商的网站上，我对我运行的页面一无所知。

我想这是一个解决方案，使用

map（）

和

getBoundingClientRect（）

：

这将返回给定类的所有坐标的数组。您可以将

document.getElementsByClassName

更改为

querySelector

，如果它更适合您的需要

---

这也会将

getBoundingClientRect（）

更改为相对于文档而不是相对于视口。

简单的js和合理的算法应该可以做到这一点。也许你应该缓存一些偏移量，这取决于你在做什么。是的，我也这么认为，只是想确保我没有错过任何技巧或更好的东西/排序器/更高效。getBoundingClientRect是相对于视口的，我需要它相对于文档。我需要在document.body上循环。@mrgoos更新了答案。您有一些问题。首先，document.getBoundingClientRect（）不是函数。第二，map只适用于数组，而不是类似数组的。但我知道你要去哪里。我不确定它是否会更好，但我会在这里检查和更新，干杯。此外，我需要一个深入的循环。

var elements = document.getElementsByClassName('someclass');

elements.map(function(val, i, arr) {

  var doc = document.getBoundingClientRect(),
      el = val.getBoundingClientRect(),
      coordsX = el.left - doc.left,
      coordsY = el.top - doc.top;

  return {x: coordsX, y: coordsY};
});