本文讲解如何正确使用 JavaScript 同时修改 DOM 元素的文本内容（textContent）和文字颜色（style.color），避免因链式赋值语法错误导致代码失效。

本文讲解如何正确使用 javascript 同时修改 dom 元素的文本内容（`textcontent`）和文字颜色（`style.color`），避免因链式赋值语法错误导致代码失效。

在 JavaScript 中，初学者常误以为可以像这样“链式”设置多个属性：

document.getElementById("test")
  .style.color = "magenta";  // ✅ 这行执行后返回字符串 "magenta"
  .textContent = "Goodbye";   // ❌ 错误：试图给字符串 "magenta" 设置 textContent 属性

这段代码会报错（如 Uncaught TypeError: Cannot set property 'textContent' of undefined 或语法高亮提示），根本原因有两个：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

1. 赋值表达式的返回值是被赋的值，而非原对象：element.style.color = "magenta" 的结果是 "magenta"（字符串），而不是 element 本身；
2. 分号强制终止语句：JavaScript 遇到分号即结束当前语句，因此第二行 .textContent = ... 实际上成了孤立的、无主语的语法错误。

✅ 正确做法是：先获取元素引用并保存为变量（推荐使用 const），再分别设置样式与内容：

<p id="test">Hello world</p>
<button onclick="doSomething()">点击修改</button>

function doSomething() {
  const element = document.getElementById("test");
  element.style.color = "magenta";
  element.textContent = "Goodbye";
}

? 补充说明与最佳实践：

• 使用 const 声明 element 是安全且推荐的，因为后续只对它的属性进行修改，不重新赋值该变量；
• 若需兼容旧浏览器或需设置内联样式以外的类名，建议优先使用 className 或 classList.add() 配合 CSS 类控制样式，例如：

  .highlight { color: magenta; font-weight: bold; }

  element.className = "highlight";
  element.textContent = "Goodbye";

• 注意区分 textContent 与 innerHTML：前者仅设置纯文本（防 XSS 安全），后者可解析 HTML 标签；若只需替换文字，始终优先用 textContent；
• 确保脚本在 DOM 加载完成后执行（如将 <script> 放在 </script>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南