如何动态读取 div 的所有跨度？

在前端开发过程中，有时需要获取 div 元素内所有子元素的跨度（即包含元素的宽度/高度），并进行相应处理。本文将介绍如何使用 JavaScript 动态读取 div 元素内所有跨度。

获取 div 元素

首先要获取 div 元素，可以使用 querySelector 方法进行选择器匹配：

const container = document.querySelector('.container');

上面代码获取了具有 container 类名的 div 元素。

获取所有子元素

要获取所有子元素，在获取容器元素之后可以使用 children 属性获取：

const children = container.children;

计算子元素跨度

计算子元素跨度可以使用 getBoundingClientRect 方法，该方法可以获取元素的位置和大小信息。我们可以使用 width 和 height 属性获取元素的宽度和高度：

const spans = [];

for (let i = 0; i < children.length; i++) {
  const rect = children[i].getBoundingClientRect();
  const span = {
    width: rect.width,
    height: rect.height
  };
  spans.push(span);
}

上面代码遍历了所有子元素，通过 getBoundingClientRect 方法获取元素的位置和大小信息，并将其存储在 span 对象中，最后将 span 对象存储在 spans 数组中。

总结

上面介绍了如何动态读取 div 元素内所有跨度，涉及了获取容器元素、获取所有子元素和计算子元素跨度三个方面。通过上述步骤，我们可以方便地获取 div 元素内所有子元素的跨度，并进行进一步的处理。

## 获取 div 元素

首先要获取 `div` 元素，可以使用 `querySelector` 方法进行选择器匹配：

```javascript
const container = document.querySelector('.container');

上面代码获取了具有 container 类名的 div 元素。

获取所有子元素

要获取所有子元素，在获取容器元素之后可以使用 children 属性获取：

const children = container.children;

计算子元素跨度

计算子元素跨度可以使用 getBoundingClientRect 方法，该方法可以获取元素的位置和大小信息。我们可以使用 width 和 height 属性获取元素的宽度和高度：

const spans = [];

for (let i = 0; i < children.length; i++) {
  const rect = children[i].getBoundingClientRect();
  const span = {
    width: rect.width,
    height: rect.height
  };
  spans.push(span);
}

上面代码遍历了所有子元素，通过 getBoundingClientRect 方法获取元素的位置和大小信息，并将其存储在 span 对象中，最后将 span 对象存储在 spans 数组中。