如何定位指定class下的目标标签并修改其内部文本？

核心报错原因 #

你原有写法无法生效有两个直接问题：

• getElementsByClassName 返回值是 HTMLCollection类数组集合，不是单个DOM元素，无法直接在集合上链式调用getElementsByTagName方法
• 你代码里查找的父元素class是gamipress-progress-bar-completed，和给出的DOM结构中的父级classpre-class不匹配，自然无法定位到目标节点

可直接复用的实现方案 #

方案1：使用querySelector快速匹配（推荐） #

不需要给元素加额外ID，直接通过CSS选择器语法匹配层级关系，写法更简洁：

• 单个元素匹配（匹配第一个符合规则的节点）

// 注意把选择器里的class替换成你实际业务里的父级class
const targetNode = document.querySelector('.pre-class div');
if (targetNode) {
  targetNode.textContent = targetNode.textContent.replace('%', '');
}

• 批量匹配（如果页面有多个同结构的进度条需要处理）

const allTargetNodes = document.querySelectorAll('.pre-class div');
allTargetNodes.forEach(node => {
  node.textContent = node.textContent.replace('%', '');
});

如果要严格匹配父元素的直接子div，避免选到更深层的无关div，可以把选择器改成.pre-class > div

方案2：修正原有getElementsBy系列写法 #

如果需要兼容极老版本浏览器、不想用querySelector，记得先从类数组集合中按下标取出具体元素再做后续查询：

// 取第一个匹配class的父元素，集合索引从0开始
const parentNode = document.getElementsByClassName('pre-class')[0];
if (parentNode) {
  const targetNode = parentNode.getElementsByTagName('div')[0];
  if (targetNode) {
    targetNode.textContent = targetNode.textContent.replace('%', '');
  }
}

注意事项 #

• 如果目标DOM是短代码动态渲染、不是页面初始加载就存在的，需要等DOM渲染完成后再执行上述代码，可以把逻辑放在DOMContentLoaded事件回调中，或者将脚本放在页面底部引入
• 所有getElementsBy*方法返回的都是实时更新的类数组集合，不能直接调用DOM原型上的查询方法，必须先取出具体元素节点

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