如何从数量不确定的同class元素中获取坐标并调用getBoundingClientRect()

核心问题解答 #

你用document.querySelectorAll('.point')获取到的是NodeList集合，要调用getBoundingClientRect()其实很简单：只要把这个集合转换成普通数组（或者直接遍历NodeList），每个元素本身就是原生DOM节点，直接调用方法即可——不需要额外的类型转换，因为NodeList里的每一项都是合法的DOM Element对象。

完整实现代码 #

// 1. 获取所有class为point的元素，转换为数组（更灵活支持数组方法）
const pointElements = Array.from(document.querySelectorAll('.point'));

// 2. 初始化坐标数组，按要求存入x（奇数位，从1开始计数）和y（偶数位）
const coordinates = [];

pointElements.forEach(element => {
  // 直接调用DOM元素的原生方法getBoundingClientRect()
  const rect = element.getBoundingClientRect();
  // 按顺序存入：第1位（索引0）x，第2位（索引1）y，第3位（索引2）x...以此类推
  coordinates.push(rect.x);
  coordinates.push(rect.y);
});

其他可选的数组转换方式 #

如果习惯不同，也可以用这些方式把NodeList转成数组：

• 扩展运算符：const pointElements = [...document.querySelectorAll('.point')];
• 兼容老浏览器的写法：const pointElements = Array.prototype.slice.call(document.querySelectorAll('.point'));

额外注意事项 #

• 现代浏览器的NodeList本身支持forEach遍历，所以如果不需要数组的其他方法（比如map、filter），也可以直接遍历NodeList，不用转数组：

const coordinates = [];
document.querySelectorAll('.point').forEach(element => {
  const { x, y } = element.getBoundingClientRect();
  coordinates.push(x, y);
});

• 如果担心页面中可能存在非DOM元素的异常情况，可以加个简单判断避免报错：

pointElements.forEach(element => {
  if (!(element instanceof Element)) return;
  const { x, y } = element.getBoundingClientRect();
  coordinates.push(x, y);
});

内容的提问来源于stack exchange，提问作者Lil_VuV