JS不使用querySelector实现根据用户输入修改按钮颜色的方法

以下几种原生DOM API都可以实现该需求，不需要依赖querySelector：

方案1：使用getElementsByTagName（无额外属性依赖） #

不需要给元素自定义类、id等属性，直接按标签名筛选元素，通用性最强：

// 获取页面所有button元素和第一个input元素
const allButtons = document.getElementsByTagName('button');
const numInput = document.getElementsByTagName('input')[0];

// 监听输入框回车提交事件
numInput.addEventListener('keydown', e => {
  if (e.key !== 'Enter') return;
  const inputNum = parseInt(numInput.value.trim());
  // 校验输入为1-10的合法数字
  if (isNaN(inputNum) || inputNum < 1 || inputNum > 10) return;
  // 集合下标从0开始，所以序号减1
  const targetBtn = allButtons[inputNum - 1];
  targetBtn.style.backgroundColor = '#f00'; // 自定义要修改的颜色
})

注意：getElementsByTagName返回动态HTMLCollection，页面按钮数量变化时会自动更新，无需重新获取

方案2：使用getElementsByClassName（精准筛选） #

如果给10个目标按钮加了统一类名（如scene-btn）、输入框加了类名（如num-input），可以用该方法避免拿到页面其他无关按钮：

const allButtons = document.getElementsByClassName('scene-btn');
const numInput = document.getElementsByClassName('num-input')[0];

// 后续逻辑和方案1一致
numInput.addEventListener('keydown', e => {
  if (e.key !== 'Enter') return;
  const inputNum = parseInt(numInput.value.trim());
  if (isNaN(inputNum) || inputNum < 1 || inputNum > 10) return;
  allButtons[inputNum - 1].style.backgroundColor = '#f00';
})

方案3：使用getElementById（直接定位目标） #

如果提前给每个按钮按序号设置id（如btn-1、btn-2...btn-10），输入框设置id（如num-input），可以直接定位目标按钮，不需要拿到所有按钮集合：

const numInput = document.getElementById('num-input');

numInput.addEventListener('keydown', e => {
  if (e.key !== 'Enter') return;
  const inputNum = parseInt(numInput.value.trim());
  if (isNaN(inputNum) || inputNum < 1 || inputNum > 10) return;
  const targetBtn = document.getElementById(`btn-${inputNum}`);
  targetBtn.style.backgroundColor = '#f00';
})

其他可选方案 #

如果输入框和按钮都包裹在form表单内，还可以通过document.forms集合直接通过元素的name属性获取元素，写法更简洁：

• 示例：const numInput = document.forms[0].btnNum; （假设input的name属性为btnNum）

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