HTML表格内input/select元素使用getElementsByName失效问题咨询

问题原因 #

你调用document.getElementsByName()时传入的参数与元素实际name属性值不匹配，这不是该API的已知使用限制，属于参数书写错误导致的异常。
你代码中表格内的表单元素name属性都携带了数组标识[]，例如<select name="forwarding_class[]">、<input name="min_bw[]">，但你调用方法时传入的是'forwarding_class'、'min_bw'，缺失了末尾的[]后缀，无法匹配到对应元素，因此返回的节点列表为空。而id属性没有携带[]后缀，因此getElementById()可以正常查询到元素。

解决方法 #

方案1：调整查询参数 #

直接补全getElementsByName的入参，使用完整的name属性值查询即可：

fc = document.getElementsByName('forwarding_class[]');
min_bw = document.getElementsByName('min_bw[]');
exact =  document.getElementsByName('exact[]');

方案2：使用模糊匹配查询 #

如果不想硬编码[]后缀，也可以用querySelectorAll实现前缀匹配查询：

// 匹配所有name属性以forwarding_class开头的select元素
fc = document.querySelectorAll('select[name^="forwarding_class"]');
// 匹配所有name属性以min_bw开头的input元素
min_bw = document.querySelectorAll('input[name^="min_bw"]');
// 匹配所有name属性以exact开头的select元素
exact = document.querySelectorAll('select[name^="exact"]');

额外注意 #

如果调整参数后仍然查询不到元素，需要确认你的JS代码执行时机是否早于DOM元素渲染：

• 可以把JS代码放在页面</body>标签之前
• 或者把查询逻辑包裹在DOMContentLoaded事件回调中，确保DOM加载完成后再执行查询操作

document.addEventListener('DOMContentLoaded', function() {
  // 在这里执行元素查询和校验逻辑
})

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