如何在一个JS文件中读取另一个JS文件修改后的页面DOM元素内容

• JS执行顺序错位：第二个JS文件早于第一个修改元素的JS文件执行，读取操作发生在元素内容修改之前，只能拿到初始空值。
• 若第一个JS的修改逻辑是异步触发（如接口请求回调、用户交互事件回调），第二个JS执行时修改逻辑尚未触发，也会出现该问题。

方案1：调整JS引入顺序 #

直接在HTML中调整两个JS文件的引入先后，保证修改元素的JS先加载执行，读取的JS后加载：

<!-- 先引入修改span内容的JS文件 -->
<script src="./first.js"></script>
<!-- 后引入读取span内容的JS文件 -->
<script src="./second.js"></script>

方案2：对齐执行时机 #

如果第一个JS的修改逻辑是异步的，可以通过事件通知的方式保证读取时机正确：

1. 在第一个JS的修改逻辑执行完成后，触发自定义事件：

// 原有修改逻辑
document.getElementById("total-commande").appendChild(document.createTextNode(`${parseFloat(total).toFixed(2)} $`))
// 新增事件触发代码
document.dispatchEvent(new CustomEvent('totalCalculated'))

2. 第二个JS监听该事件后再执行读取逻辑：

document.addEventListener('totalCalculated', () => {
  var T = document.getElementById("total-commande")
  // 后续使用T的逻辑写在此回调内即可
})

如果不需要兼容异步场景，也可以直接把第二个JS的逻辑包裹在DOMContentLoaded回调中，保证所有前置同步JS执行完成后再运行：

document.addEventListener('DOMContentLoaded', () => {
  var T = document.getElementById("total-commande")
  // 后续逻辑
})

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