通过属性值查找HTML标签并修改指定标签的文本与属性

场景说明 #

• 点击id为1106的外部按钮，触发myFunc函数并获取该按钮id
• 查找HTML中data-dselect-value="1106"的按钮，提取其文本内容（示例为"Robert"）
• 将目标下拉按钮的文本内容和data-dselect-text属性值从"Charles"修改为提取到的文本

完整代码实现 #

HTML示例结构 #

<!-- 外部触发按钮 -->
<button id="1106" onclick="myFunc(this.id)">选择Robert</button>

<!-- 待查找的目标按钮 -->
<button data-dselect-value="1106">Robert</button>

<!-- 需要修改的下拉按钮 -->
<button class="dselect-button" data-dselect-text="Charles">Charles</button>

完善后的JavaScript函数 #

function myFunc(btnId) {
  // 1. 根据属性值定位目标按钮
  const sourceBtn = document.querySelector(`[data-dselect-value="${btnId}"]`);
  if (!sourceBtn) {
    console.warn(`未找到data-dselect-value="${btnId}"的元素`);
    return;
  }

  // 2. 提取按钮文本（去除首尾空格）
  const targetText = sourceBtn.textContent.trim();

  // 3. 定位需要修改的下拉按钮（可根据实际调整选择器，比如用id）
  const dselectBtn = document.querySelector('.dselect-button');
  if (!dselectBtn) {
    console.warn('未找到目标下拉按钮');
    return;
  }

  // 4. 更新文本内容和属性值
  dselectBtn.textContent = targetText;
  dselectBtn.setAttribute('data-dselect-text', targetText);
}

关键细节 #

• 使用属性选择器[data-dselect-value="${btnId}"]精准匹配目标元素
• 增加元素存在性判断，避免找不到元素时抛出报错
• 用textContent.trim()处理文本，避免多余空格影响显示
• 同时更新按钮的显示文本和data-dselect-text属性，保证数据一致性

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