如何将多个同class的input输入值读取到数组中

问题场景 #

已构建包含多组筛选输入的页面，代码如下：

HTML #

<div class="filter-group">
    <div class="filter-group__title">
        Publish year
    </div>
    <div class="filter-group__input">
        <input type="text"  placeholder="from" />
        <span> - </span>
        <input type="text"  placeholder="to" />
    </div>
</div>
<div class="filter-group">
    <div class="filter-group__title">
        Pages amount
    </div>
    <div class="filter-group__input">
        <input type="text"  placeholder="from" />
        <span> - </span>
        <input type="text"  placeholder="to" />
    </div>
</div>

<button class="filter-button">Apply filters</button>

CSS #

.filter-button{
    margin: 5px;
    margin-top: auto;
    border-radius: 5px; 
}

.filter-group{
    margin: 10px;
    font-size: 13px;
}

.filter-group__title {
    margin-bottom: 5px;
}

.filter-group__input {
    display: flex;
}

.filter-group__input input {
    width: 1%;
    flex: 1 1 auto;
}

.filter-group__input span {
    margin: 0 5px;
    font-size: 1rem;
}

JS（当前状态） #

const applyButton = document.querySelector(".filter-button");

applyButton.addEventListener("click", dummyFetchFunction);

function dummyFetchFunction(){
  //here I want to read the input into an array.
  
  
  //Then I will do the fetch passing this array as parameter.
}

需求：点击「Apply filters」按钮时，将所有input的取值读取到数组中，用于后续fetch请求参数，不想通过给每个input手动加ID的方式实现，寻求更高效的方案。

高效实现方案 #

方案1：直接获取所有输入值组成一维数组 #

利用CSS选择器批量定位所有筛选输入框，无需手动添加ID，代码简洁易维护：

function dummyFetchFunction(){
  // 批量获取所有筛选输入框，转换为数组后提取值
  const inputValues = Array.from(document.querySelectorAll('.filter-group__input input'))
    .map(input => input.value.trim());
  
  console.log(inputValues);
  // 示例：传入fetch请求
  // fetch('/api/filter', {
  //   method: 'POST',
  //   body: JSON.stringify(inputValues),
  //   headers: { 'Content-Type': 'application/json' }
  // });
}

方案2：按筛选组整理结构化数据（更推荐） #

如果需要区分每个筛选组的「from/to」对应关系，可按分组提取数据，得到更清晰的结构化数组，后续传参可读性更强，新增筛选组也无需修改JS代码：

function dummyFetchFunction(){
  // 遍历所有筛选组，提取每组的标题和输入值
  const filterGroups = Array.from(document.querySelectorAll('.filter-group'));
  const filterData = filterGroups.map(group => {
    // 获取当前筛选组的标题（如"Publish year"）
    const filterTitle = group.querySelector('.filter-group__title').textContent.trim();
    // 获取当前组的两个输入框
    const [fromInput, toInput] = group.querySelectorAll('.filter-group__input input');
    
    return {
      [filterTitle]: {
        from: fromInput.value.trim(),
        to: toInput.value.trim()
      }
    };
  });

  // 如果确实需要一维数组，可从结构化数据中提取
  const flatValues = filterGroups.flatMap(group => {
    return Array.from(group.querySelectorAll('.filter-group__input input')).map(input => input.value.trim());
  });

  console.log('结构化筛选数据:', filterData);
  console.log('一维输入值数组:', flatValues);
  
  // 示例：传入fetch请求（结构化数据更适合后端解析）
  // fetch('/api/filter', {
  //   method: 'POST',
  //   body: JSON.stringify(filterData),
  //   headers: { 'Content-Type': 'application/json' }
  // });
}

方案优势 #

• 无需手动添加ID，通过类选择器批量定位元素，代码扩展性强，新增筛选组无需修改JS逻辑
• 结构化数据方案能清晰对应每个筛选条件的范围，更符合后端接口的参数接收逻辑
• 代码简洁，利用数组方法（map/flatMap）高效处理批量元素

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