如何基于span文本实现条件触发的元素内容变更？

你的代码存在几个关键问题，导致无法实现需求：

• span是普通DOM元素，没有value属性，获取文本内容应该用textContent或innerText。
• 代码仅在页面加载时执行一次判断，不会监听后续DOM内容的修改，手动修改span内容时不会触发逻辑。
• 存在拼写错误：getELementById应该改为getElementById（注意字母L的大小写）。

正确实现方式 #

要监听DOM元素的内容变化，需要使用MutationObserver API，它可以实时监听元素的文本变更。以下是完整可运行的代码：

<span class="lunch" id="foods"> My fruits </span>
<span class="lunch" id="food"> apple </span>

<script type="text/javascript">
// 获取目标元素
const foodsSpan = document.getElementById('foods');
const foodSpan = document.getElementById('food');

// 创建观察者实例，监听内容变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    // 去除文本前后空格后判断，避免原文本的空格干扰
    if (foodsSpan.textContent.trim() === 'My sweets') {
      foodSpan.textContent = 'chocolate bar';
    }
    // 可选：如果需要切回原文本时恢复内容，可添加以下逻辑
    // else if (foodsSpan.textContent.trim() === 'My fruits') {
    //   foodSpan.textContent = 'apple';
    // }
  });
});

// 配置观察规则：监听元素内部的子节点（包括文本）变化
const observeConfig = { childList: true, subtree: true };

// 启动观察
observer.observe(foodsSpan, observeConfig);
</script>

代码说明 #

• MutationObserver会持续监听目标元素的内容变更，当第一个span的文本被修改时，自动触发回调函数。
• 使用trim()处理文本，避免原span文本前后的空格导致判断失败。
• 配置childList: true和subtree: true，确保能捕捉到元素内部文本节点的变化。

测试方式 #

打开浏览器开发者工具（F12），找到id为foods的span元素，修改其文本为"My sweets"，即可看到第二个span的文本自动切换为"chocolate bar"。

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