如何使用原生JavaScript通过类选择器通用定位表单输入框并注入变量

我来帮你搞定这个问题！既然父段落有固定的GA_Client_ID和GACLIENTID类名，我们完全可以绕开每次克隆都会变化的name属性，通过父元素来定位内部的输入框，这样脚本就通用啦。

试试下面这个修改后的脚本：

(function() {
  // 定位所有带有目标类名的父段落元素
  const parentContainers = document.querySelectorAll('.GA_Client_ID, .GACLIENTID');
  
  parentContainers.forEach(container => {
    // 在每个父容器内部查找对应的input输入框
    const targetInput = container.querySelector('input');
    if (targetInput) {
      targetInput.value = {{DL - GA Client ID}};
    }
  });
})();

思路说明： #

• 第一步用document.querySelectorAll('.GA_Client_ID, .GACLIENTID')选中所有带有这两个类的父段落，这两个类名是固定的，不会随表单克隆变化；
• 然后遍历每个父段落，用container.querySelector('input')在当前父元素内部查找输入框——这样只会定位到该段落里的input，不会误触页面上其他输入框；
• 最后确认找到input后，再把GA Client ID赋值给它。

如果你的父段落里有多个input（比如还有隐藏域之类的），可以给目标input加个更精准的筛选，比如根据type属性：

const targetInput = container.querySelector('input[type="text"]');

这样不管表单怎么克隆，只要父元素的类名不变，脚本就能稳定找到目标输入框啦！

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