使用纯JavaScript选择所有非内联的输入文本框元素

问题分析 #

你需要筛选出独立成行（非内联）的input[type=text]和input[type=number]，排除那些前面紧跟<label>的内联输入框。之前的代码无法运行，是因为忽略了「输入框无前一个兄弟元素」的情况——直接访问previousElementSibling.tagName会触发类型错误，导致整个筛选逻辑中断。

修正后的代码 #

JavaScript 核心实现

// 获取目标类型输入框并筛选
let selectedTextBoxes = Array.from(document.querySelectorAll('input[type=text], input[type=number]'))
  .filter(input => {
    const prevSibling = input.previousElementSibling;
    // 符合条件的两种情况：无前一个兄弟元素，或前一个兄弟不是label
    return !prevSibling || prevSibling.tagName !== 'LABEL';
  });

// 给目标输入框添加高亮样式
selectedTextBoxes.forEach(textBox => textBox.classList.add('highlight'));

配套样式

.highlight { background: gold; }

测试用HTML

<h2>Select an Option</h2>

<div class="label-group">
  <label>A</label>
  <input type="radio">
</div>
<div class="label-group">
  <label>B</label>
  <input type="radio">
</div>
<div class="label-group">
  <label>Other</label>
  <input type="text">
</div>

<h3>Now type in a number between 1 and 99</h3>
<input type="number">
<h3>Type in a comment</h3>
<input type="text">

现代浏览器优化方案 #

如果你的项目仅需兼容现代浏览器，可以用CSS选择器直接完成筛选，代码更简洁：

// 用:not(:has(+ label))排除前面紧跟label的输入框
let selectedTextBoxes = Array.from(document.querySelectorAll('input[type=text]:not(:has(+ label)), input[type=number]:not(:has(+ label))'));
selectedTextBoxes.forEach(textBox => textBox.classList.add('highlight'));

注意：:has()选择器不支持IE及旧版Edge，如需兼容低版本环境，优先使用第一种filter方案。

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