如何使用JS修改无类名span且父div无id场景下的span文本

基于你提供的HTML结构：

<div class="mobilMenuAcButton">
  <span>MENU</span>
  <i class="fal fa-bars"></i>
</div>

你可以通过父元素已有的class属性定位，再查找对应子span完成修改，可根据实际场景选择以下任意一种实现方式：

方案1：单个匹配（适用于页面中mobilMenuAcButton类唯一的场景） #

直接通过选择器定位目标元素后修改：

// 定位父级div
const menuParent = document.querySelector('.mobilMenuAcButton')
// 匹配父级下的第一个span元素
const targetSpan = menuParent?.querySelector('span')
// 校验存在后修改文本
if (targetSpan) {
  targetSpan.textContent = '自定义替换文本'
}

方案2：批量匹配（适用于页面存在多个mobilMenuAcButton类元素的场景） #

遍历所有匹配的父元素统一修改：

document.querySelectorAll('.mobilMenuAcButton').forEach(parentEl => {
  const spanEl = parentEl.querySelector('span')
  if (spanEl) {
    spanEl.textContent = '自定义替换文本'
  }
})

方案3：精准校验匹配（避免误改其他元素） #

如果担心匹配到结构类似的其他元素，可以增加原文本内容的判断条件：

const allSpans = document.querySelectorAll('span')
const targetSpan = Array.from(allSpans).find(span => {
  return span.textContent.trim() === 'MENU' && span.parentElement.classList.contains('mobilMenuAcButton')
})
if (targetSpan) {
  targetSpan.textContent = '自定义替换文本'
}

注意事项 #

• 推荐使用textContent修改文本，相比innerText性能更好，且不会受CSS样式影响返回结果的准确性
• 如果需要保留span内的其他HTML节点，可改用innerHTML属性修改，不过要注意防范XSS注入风险
• 代码中使用的可选链操作符?.如果需要兼容ES2020以下的运行环境，可以替换为逻辑与判断：const targetSpan = menuParent && menuParent.querySelector('span')

内容的提问来源于stack exchange，提问作者Murat erdoğan