JavaScript 批量賦值表單元素的多種高效實現方式

需求

需批量修改多個 `` 元素的 `name` 屬性或值。

方案對比

1. 原生 JS 遍歷（零依賴）

function batchSetName(newName) {
    const inputs = document.getElementsByTagName('input');
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].name = newName;
    }
}

2. jQuery 一行代碼（推薦項目已引入 jQuery）

// 修改所有 input 的 name
$('input').attr('name', 'newName');

// 修改特定 class 的 value
$('.my-class').val('newValue');

3. 現代 ES6+ 寫法

// NodeList 轉數組後用 forEach
[...document.querySelectorAll('input')].forEach(el => el.name = 'newName');

性能與選型建議

• 元素量 < 1000：差異可忽略，優先考慮代碼可讀性。
• 大規模操作（萬級）：原生循環最快，避免 jQuery 封裝開銷。
• 批量賦值前建議統一 class 或 `data-*` 屬性標記目標元素，避免誤傷無關輸入框。