如何使用JavaScript为ID动态变化的input标签添加指定name属性

解决方案 #

你可以通过该元素的固定公共特征（父容器固定class、固定placeholder、固定input类型）来定位，完全不需要依赖动态变化的id，以下是几种不同场景的实现方案： #

方案1：最稳定的特征匹配定位（普通静态页面直接用）

该input位于固定class为directions_holder的容器内，且type为text、placeholder固定为Your Location，直接用属性选择器定位即可：

const targetInput = document.querySelector('.directions_holder form input[type="text"][placeholder="Your Location"]');
if (targetInput) {
  targetInput.setAttribute('name', 'autocomplete_address');
}

方案2：避免placeholder改动的兼容方案

如果后续placeholder可能修改，也可以通过「目标form下唯一的文本输入框」这个特征定位：

const directionForm = document.querySelector('.directions_holder form');
if (directionForm) {
  // 筛选form下所有文本类型input，第一个就是目标元素
  const textInputList = directionForm.querySelectorAll('input[type="text"]');
  if (textInputList.length) {
    textInputList[0].setAttribute('name', 'autocomplete_address');
  }
}

方案3：表单为动态加载场景的解决方案

如果该表单是页面加载完成后异步渲染到DOM中的，直接执行上面的代码会找不到元素，可以用MutationObserver监听DOM变化，等元素出现后再操作：

const observer = new MutationObserver(() => {
  const targetInput = document.querySelector('.directions_holder form input[type="text"][placeholder="Your Location"]');
  if (targetInput) {
    targetInput.setAttribute('name', 'autocomplete_address');
    // 匹配到目标后停止监听，减少性能消耗
    observer.disconnect();
  }
});
// 监听整个body的DOM子元素变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

如果页面存在多个directions_holder容器，只需要在选择器前加上更上层的固定父元素class限制匹配范围即可。

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