如何编写函数遍历表单元素属性，生成标签为键输入值为值的对象？

没问题，我来帮你搞定这个需求——把表单里的label文本作为对象的键，对应input的value作为值，最终返回这个结构化对象对吧？

首先说最靠谱的实现思路：利用label的for属性和input的id属性来配对，这两个属性本来就是HTML规范里用来关联label和对应输入框的，比单纯按DOM顺序遍历要稳得多（哪怕后续表单元素顺序调整，也不会影响配对逻辑）。

下面给你两种实用的实现方式：

方法一：先建立Label映射（高效） #

先遍历所有元素，把label的for（对应input的id）和文本内容存成一个映射表，再遍历input元素，根据id找到对应的label文本，快速构建最终对象：

function formObj(elements) {
  const result = {};
  // 创建id到label文本的映射表
  const labelIdMap = {};

  elements.forEach(element => {
    // 处理label元素
    if (element.tagName === 'LABEL') {
      const targetInputId = element.getAttribute('for');
      const labelText = element.textContent.trim();
      // 确保有对应的input id和有效文本
      if (targetInputId && labelText) {
        labelIdMap[targetInputId] = labelText;
      }
    } 
    // 处理input元素
    else if (element.tagName === 'INPUT') {
      const inputId = element.id;
      const key = labelIdMap[inputId];
      if (key) {
        // 可选：把数字字符串转成数字类型（比如age的"22"转成22）
        let value = element.value;
        if (!isNaN(value) && value.trim() !== '') {
          value = Number(value);
        }
        result[key] = value;
      }
    }
  });

  return result;
}

// 调用示例
let elements = document.querySelectorAll('form *');
console.log(formObj(elements)); // 输出: {name: "Harry", email: "harry@gmail.com", age: 22}

方法二：直接通过Input找对应Label（直观） #

如果你觉得先建映射有点绕，也可以直接筛选出所有input，再从元素列表里精准找到对应的label：

function formObj(elements) {
  const result = {};
  // 把类数组的elements转成数组，方便使用filter/find方法
  const elementArr = Array.from(elements);
  
  // 筛选出所有input元素
  const inputs = elementArr.filter(el => el.tagName === 'INPUT');

  inputs.forEach(input => {
    // 根据input的id找到匹配的label
    const matchedLabel = elementArr.find(
      el => el.tagName === 'LABEL' && el.getAttribute('for') === input.id
    );
    if (matchedLabel) {
      const key = matchedLabel.textContent.trim();
      let value = input.value;
      // 同样处理数字转换逻辑
      if (!isNaN(value) && value.trim() !== '') {
        value = Number(value);
      }
      result[key] = value;
    }
  });

  return result;
}

几个细节提醒： #

• DOM元素的tagName返回的是大写字符串（比如LABEL、INPUT），所以判断的时候要写大写哦
• 用textContent.trim()可以去掉label文本前后的多余空格，避免键名出现不必要的空白
• 数字转换是可选逻辑，如果你的表单里有数字类型的输入（比如age），这个处理能让值变成数字而不是字符串，刚好符合你期望的输出
• 另外提个小问题：你提供的HTML里label的闭合标签写错了，应该是</label>而不是<label/>，这个小错误可能会导致DOM解析异常，记得修正～

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