本文介绍如何使用 JavaScript 正确获取页面中所有具有相同 class（如 .content）的 DOM 元素的实际渲染高度，并提供可直接运行的代码示例与关键注意事项。

本文介绍如何使用 javascript 正确获取页面中所有具有相同 class（如 `.content`）的 dom 元素的实际渲染高度，并提供可直接运行的代码示例与关键注意事项。

在实际开发中，常需批量读取多个结构相同容器的渲染高度（例如用于动态布局、等高卡片、滚动计算等）。但初学者容易误用 offsetHeight 或 getBoundingClientRect().height 于 NodeList，导致返回 undefined 或仅获取首个元素——这是因为 document.querySelectorAll() 返回的是静态 NodeList，不支持直接调用 offsetHeight 等实例属性。

✅ 正确做法是：遍历 NodeList 中每个元素，对单个 DOM 节点调用高度获取方法。推荐使用 getBoundingClientRect().height，因为它返回精确的、包含边框与内边距的渲染高度（单位：px），且不受 CSS display: none 或未渲染状态影响（相比 offsetHeight 更可靠）：

const contentElements = document.querySelectorAll('.content');

// 方式一：累加总高度
let totalHeight = 0;
contentElements.forEach(el => {
  totalHeight += el.getBoundingClientRect().height;
});
console.log('所有 .content 元素总高度:', totalHeight);

// 方式二：获取每个元素的高度数组（便于后续计算）
const heights = Array.from(contentElements, el => 
  Math.round(el.getBoundingClientRect().height) // 四舍五入避免小数精度问题
);
console.log('各容器高度（px）:', heights); // 例如: [124, 86, 152]

⚠️ 注意事项：

• ❌ document.querySelectorAll('.content').offsetHeight 是错误写法——NodeList 没有 offsetHeight 属性；
• ❌ document.querySelector('.content').getBoundingClientRect().height 只返回第一个匹配元素的高度；
• ✅ 务必确保脚本执行时 DOM 已就绪（建议放在 DOMContentLoaded 事件中或 <script> 放在 </script>