JS如何不使用ID定位非紧邻前置节点内的input实现复制功能

• 点击复制按钮时无法定位到对应input标签（默认值为words）完成文本复制，需修改现有JS代码实现正确取值
• 实现约束：禁止使用ID属性，因该结构需要大量复用，不希望为每个input单独设置ID
• 可行方向：可通过查找类名为columns small-8的元素子节点定位目标input

原代码的相邻节点查找逻辑不匹配实际DOM结构：原逻辑默认按钮是.row.collapse容器的直接子元素，连续调用两次previousElementSibling找目标元素，但实际按钮嵌套在第三层<div class="columns small-2">内部，直接取按钮的前一个兄弟节点会得到null，后续选中文本、复制值的逻辑全部无法执行。就算调整相邻查找的层级，原方案也极度依赖DOM固定顺序，后续只要微调结构就会再次失效。

采用「向上找公共父容器→向下找目标input」的逻辑，不依赖元素相邻位置，支持同结构无限复用，不需要给任何元素加ID：

<script>
window.onload=function(){
  let btns = document.getElementsByTagName("button")
  Array.from(btns).forEach(ele => {
    ele.addEventListener("click", function() {
      jimsFunction(this)
    });
  })  
  function jimsFunction(clickBtn) {
    // 向上查找最近的公共父容器.row.collapse
    const rowWrap = clickBtn.closest('.row.collapse')
    // 在父容器内查找small-8列下的input
    const targetInput = rowWrap.querySelector('.columns.small-8 input')
    
    targetInput.select()
    targetInput.setSelectionRange(0, 99999)
    navigator.clipboard.writeText(targetInput.value)
    alert("Copied: " + targetInput.value)
  }
}
</script>

方案优势 #

• 无ID依赖，同结构的复制模块可以任意批量复用，不需要额外加标识
• 容错性高，只要公共容器和small-8列的结构不变，就算调整按钮、View链接的嵌套层级或者顺序，复制功能都不会失效
• 修正了原代码形参命名误导问题：原代码形参命名为input，实际传入的是点击的按钮对象，容易引发逻辑错误

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