DOM HTML

这一节学习如何用 JavaScript 读写 HTML 内容与属性：改文字、换图片、改链接、动态写标签。掌握了这些，页面就能根据用户的操作实时变化，这正是"动态网页"的基础。

改变元素内容：innerHTML

innerHTML 既可读取也可写入元素内部的 HTML。写入时字符串里的标签会被解析并真正渲染：

<p id="demo">旧内容</p>
<script>
  // 先读取
  console.log(document.getElementById("demo").innerHTML); // 输出：旧内容
  // 再写入：字符串中的 <b> 会被解析成加粗
  document.getElementById("demo").innerHTML = "新内容 <b>加粗</b>";
</script>

运行后段落显示"新内容 加粗"，控制台先输出"旧内容"。

改变元素属性

元素的属性（src、href、alt、title 等）可以直接赋值来修改：

<img id="pic" src="cat.jpg" alt="小猫">
<script>
  const img = document.getElementById("pic");
  img.src = "dog.jpg";   // 图片立即换成 dog.jpg
  img.alt = "小狗";       // 替代文字同步修改
  console.log(img.src);  // 输出：dog.jpg（返回完整地址）
</script>

用事件驱动变化

实际页面中，修改内容常常发生在事件（如点击）之后：把代码写进函数，再绑定到按钮事件上：

<p id="msg">你好</p>
<button onclick="sayHi()">打招呼</button>
<script>
  function sayHi() {
    document.getElementById("msg").innerHTML = "欢迎来到 DOM HTML 教程！";
  }
</script>

点击按钮后，段落文字被替换（结果显示在页面上）。

慎用 document.write

document.write 也能写 HTML，但它有个大坑：页面加载完成后调用，会先清空整个页面再写入：

<button onclick="badWrite()">危险按钮</button>
<script>
  function badWrite() {
    document.write("整页被覆盖了");
  }
</script>

所以现代开发几乎不用它，修改内容优先用 innerHTML 或 textContent。

textContent 与 innerHTML 的区别

innerHTML 会把字符串当作 HTML 解析；textContent 只当纯文本，天然避免"用户输入被当作脚本执行"（XSS 攻击）：

const p = document.getElementById("demo");
p.innerHTML = "<b>粗体</b>";        // 页面出现加粗文字
p.textContent = "<b>原样显示</b>";  // 页面显示字面标签文本

如果内容来自用户输入，务必用 textContent 或先做转义。

小结

读写 DOM 的 HTML：内容用 innerHTML（解析标签）或 textContent（纯文本、更安全），属性用点号直接赋值，再配合事件函数即可让页面"活"起来；避免在页面加载完成后调用 document.write。