本文讲解如何通过 document.getelementbyid() 获取 html 元素的文本内容，并将其作为打字动画的数据源，避免硬编码字符串，提升代码可维护性与灵活性。
本文讲解如何通过 document.getelementbyid() 获取 html 元素的文本内容，并将其作为打字动画的数据源，避免硬编码字符串，提升代码可维护性与灵活性。
在实现网页打字效果（Typing Effect）时，将文案硬编码在 JavaScript 中（如 const words = ["Welcome!"]）虽简单，但不利于内容维护和多语言/多场景适配。理想做法是让 JS 从 HTML 中“读取”内容——例如从具有 id="typingText" 的元素中提取文本，再交由打字逻辑处理。
但需注意一个关键细节：原始代码中 words 是字符串数组（["Welcome!"]），而直接使用 myElement.innerHTML（或更推荐的 textContent）得到的是单个字符串（如 "Welcome!"）。若未将其包装为数组，后续访问 words[wordIndex].length 就会报错：Cannot read property 'length' of undefined，因为字符串本身没有索引项 words[0]（它本身就是值，而非数组元素）。
✅ 正确做法是将获取到的 HTML 内容显式构造成单元素数组：
<!-- HTML --> <p id="typingText">Hello, World!</p>
// JavaScript（置于独立 script 标签或外部文件中）
const typingText = document.getElementById("typingText");
// ✅ 关键修正：将 innerHTML 或 textContent 包裹成数组
const words = [typingText.textContent]; // 推荐用 textContent 避免解析 HTML 标签
// const words = [typingText.innerHTML]; // 仅当需保留内联 HTML 时使用（注意 XSS 风险）
let wordIndex = 0;
let letterIndex = 0;
function typeWords() {
if (letterIndex <p>? <strong>注意事项</strong>：</p>
- 使用 textContent 而非 innerHTML 更安全、更语义化（除非你明确需要渲染子标签）；
- 务必在 DOM 加载完成后执行脚本（可将 script 放在
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
