在JavaScript中如何通过value属性值获取对应DOM元素？

首先明确：可以通过value值获取对应DOM元素，常用有两种实现方式：

方法1：使用CSS属性选择器配合querySelector/querySelectorAll #

这是最简便的实现方式，直接通过属性选择器匹配对应value的元素即可：

• 获取单个匹配元素：用querySelector，返回第一个符合条件的DOM元素
• 获取所有匹配元素：用querySelectorAll，返回包含所有符合条件元素的NodeList

针对你给出的radio元素示例，代码如下：

// 精准匹配type为radio、value为this_value的input元素，避免匹配到其他同value的不同元素
const targetRadio = document.querySelector('input[type="radio"][value="this_value"]');

方法2：遍历元素筛选（兼容旧浏览器） #

如果需要兼容不支持querySelector的老旧浏览器，可以先获取对应范围的元素集合，再遍历判断value值匹配：

// 先获取所有input元素
const allInputs = document.getElementsByTagName('input');
let targetRadio = null;

for (let i = 0; i < allInputs.length; i++) {
  // 同时匹配元素类型和value值，提高精准度
  if (allInputs[i].type === 'radio' && allInputs[i].value === 'this_value') {
    targetRadio = allInputs[i];
    break;
  }
}

注意事项 #

• 动态修改value的场景：如果元素的value是后续通过JS动态修改的，[value="xxx"]属性选择器只能匹配元素 HTML 标签中声明的初始value值，无法匹配修改后的值。这种场景只能用遍历判断元素.value属性的方式实现匹配。
• 非唯一性问题：value不是元素的唯一标识，可能存在多个元素共用相同value的情况，建议匹配时加上元素类型、class、name等额外限定条件，缩小筛选范围避免匹配错误。

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