如何通过JavaScript正确修改页面DOM元素的文本内容？

所有获取元素、修改文本操作失效，90%以上是以下问题导致的：

• JS执行时机错误：脚本在目标DOM元素渲染完成前就运行了，此时获取到的元素值为null，后续属性修改操作全部无效。常见场景是把<script>标签放在了页面<head>中，没有做DOM加载完成监听。
• 选择器拼写错误：ID、类名、标签名存在大小写错误、多余字符、漏写字符，无法匹配到目标元素。
• 动态渲染覆盖：如果页面使用Vue/React等前端框架，手动修改的原生DOM会被框架虚拟DOM的重渲染逻辑覆盖，需要通过框架本身的数据绑定方式修改内容。

首先解决执行时机问题，二选一即可：

1. 把编写JS逻辑的<script>标签移动到</body>闭合标签的前面，保证所有DOM元素解析完成后再运行脚本
2. 给DOM操作逻辑添加加载完成监听，所有元素获取、修改逻辑都写在监听回调内：

document.addEventListener('DOMContentLoaded', () => {
  // 获取section1下的内容容器
  const contentContainer = document.querySelector('#section1 .landing__container')
  
  // 修改h2标题文本
  const sectionTitle = contentContainer.querySelector('h2')
  sectionTitle.textContent = '替换为你需要的新标题内容'

  // 批量获取容器内的段落，按索引修改对应文本
  const paraList = contentContainer.querySelectorAll('p')
  paraList[0].textContent = '替换为第一个段落的新文本'
  paraList[1].textContent = '替换为第二个段落的新文本'
})

注意：仅修改纯文本时优先使用textContent属性，相比innerHTML不存在XSS注入风险，性能也更好；只有需要插入带HTML标签的富文本内容时，才使用innerHTML。

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