HTML DOM获取页面元素数据并输出为数组的方法

在网页开发中，经常需要获取页面上元素的数据，并将其整理成数组以便进一步处理和分析。HTML DOM（文档对象模型）为我们提供了强大的工具来实现这一需求。

通过document.querySelectorAll()方法可以选择多个符合特定CSS选择器的元素。例如，若页面中有多个带有class="data-item"的<div>元素，我们可以使用const items = document.querySelectorAll('.data-item');来获取这些元素的集合。这个集合是一个类数组对象，虽然它不是真正意义上的数组，但可以很方便地转换为数组。

要将其转换为真正的数组，可以使用Array.from()方法。如const dataArray = Array.from(items); ，这样就得到了一个包含所有选中元素的数组。

接下来就是获取每个元素的数据。假设每个<div>元素内部有一个<span>元素，其data-value属性存储着我们需要的数据。可以使用map()方法遍历数组中的每个元素，并提取所需数据。代码如下：

const valuesArray = dataArray.map(item => {
    const span = item.querySelector('span');
    return span.dataset.value;
});

在上述代码中，map()方法会对dataArray中的每个元素执行回调函数。在回调函数里，首先找到每个<div>元素中的<span>元素，然后获取其data-value属性的值，并将这些值存储在新的数组valuesArray中。

另外，也可以使用querySelectorAll()结合for...of循环来达到相同的效果。示例代码如下：

const items = document.querySelectorAll('.data-item');
const valuesArray = [];
for (const item of items) {
    const span = item.querySelector('span');
    if (span) {
        valuesArray.push(span.dataset.value);
    }
}

在这段代码里，通过for...of循环遍历items集合，对于每个元素找到其中的<span>元素，若存在则将其data-value属性值添加到valuesArray数组中。

掌握HTML DOM获取页面元素数据并输出为数组的方法，能够让开发者更加高效地处理页面数据，无论是用于数据统计、动态展示还是与后端进行数据交互，都能极大地提升开发效率和网页的功能丰富度。