如何收集响应页面中的字段值并保存到列表中？

在前端开发中，收集响应页面中的字段值并保存到列表中是一个常见的需求。以下是一个详细的解决方案，包括基础概念、步骤和相关代码示例。

基础概念

DOM操作：文档对象模型（DOM）是HTML和XML文档的编程接口。通过DOM，可以访问和修改页面中的元素。
JavaScript：一种脚本语言，常用于网页交互和动态内容生成。
列表（Array）：一种数据结构，用于存储一系列元素。

步骤

获取目标元素：使用JavaScript选择器获取页面中的目标字段元素。
提取值：从每个目标元素中提取所需的值。
保存到列表：将提取的值存储到一个数组中。

示例代码

假设我们有一个HTML页面，其中包含多个输入框，每个输入框都有一个特定的类名field-value，我们希望收集这些输入框的值并保存到一个列表中。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collect Field Values</title>
</head>
<body>
    <input type="text" class="field-value" value="Value 1">
    <input type="text" class="field-value" value="Value 2">
    <input type="text" class="field-value" value="Value 3">
    <button onclick="collectValues()">Collect Values</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

function collectValues() {
    // 获取所有具有类名 'field-value' 的输入框
    const inputElements = document.querySelectorAll('.field-value');
    
    // 创建一个空数组来存储值
    const values = [];
    
    // 遍历每个输入框并提取其值
    inputElements.forEach(input => {
        values.push(input.value);
    });
    
    // 输出收集到的值
    console.log(values);
}