原生JavaScript如何查找距搜索输入框最近的后续同级文本输入框

closest()的逻辑是从当前元素出发，向上遍历DOM树查找匹配选择器的祖先元素，不会查找当前元素后面的节点，自然拿不到你要的后续文本输入框。

核心思路是：先定位到搜索输入框，再找到同容器内所有文本类型输入框，筛选出排在搜索框之后、位置最靠前的那个即可，全程不需要依赖元素ID。

// 定位搜索输入框，不需要ID，通过type属性匹配即可
const searchInput = document.querySelector('input[type="search"]');
// 获取所属表单下所有type为text的input，转成数组方便遍历
const textInputList = Array.from(searchInput.closest('form').querySelectorAll('input[type="text"]'));

// 找到搜索框之后最近的文本输入框
const nearestTextInput = textInputList.find(input => {
  // 判定节点是否在搜索框的DOM位置之后
  return searchInput.compareDocumentPosition(input) & Node.DOCUMENT_POSITION_FOLLOWING;
});

console.log(nearestTextInput); // 输出name为a的文本输入框，就是目标元素

• 上述写法兼容性好，不受搜索框和目标文本框之间插入的br、label等其他标签影响，鲁棒性远高于逐次跳nextElementSibling的写法。
• compareDocumentPosition是原生DOM提供的位置对比API，返回值的位运算可以准确判定两个节点的相对位置，不需要手动计算节点在页面里的坐标。
• 如果你的DOM结构完全固定不会变动，也可以通过循环调用nextElementSibling向后遍历匹配，但这种方案容错率极低，不推荐在生产环境使用。

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