在提交按钮刷新dom后，如何获取元素的内部文本？

在Web开发中，当页面上的元素（如提交按钮）触发DOM刷新后，获取该元素内部文本的方法通常涉及以下几个步骤：

基础概念

DOM（Document Object Model）：是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
刷新DOM：指的是页面上的某个操作导致DOM结构发生变化，例如元素的添加、删除或属性的修改。

类型

原生JavaScript：使用document.getElementById、document.querySelector等方法获取元素。
框架/库：如React、Vue等，通过状态管理或组件生命周期方法获取元素。

应用场景

表单提交：用户点击提交按钮后，获取按钮的文本内容以进行验证或记录。
动态内容展示：根据用户操作动态更新页面上的某些文本内容。

遇到的问题及解决方法

问题：为什么在提交按钮刷新DOM后，无法获取元素的内部文本？

原因：
- 异步问题：DOM刷新可能是异步的，导致在DOM实际更新之前尝试获取元素内容。
- 选择器错误：使用的选择器无法正确匹配目标元素。
- 脚本执行顺序：脚本在DOM完全加载之前执行。

解决方法：

确保DOM完全加载：
确保DOM完全加载：
使用事件监听器：
使用事件监听器：
检查选择器：
检查选择器：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Button Text</title>
</head>
<body>
    <button id="submitButton">Submit</button>
    <script>
        document.getElementById('submitButton').addEventListener('click', function() {
            console.log(this.innerText);
        });
    </script>
</body>
</html>