一、什么是 DOM

浏览器把 HTML 解析成一棵"节点树"，JavaScript 通过 DOM 接口去操作这棵树，就能动态改变页面内容。

二、选择元素

// 选择第一个匹配的元素
const title = document.querySelector("#title");

// 选择所有匹配的元素（返回 NodeList）
const items = document.querySelectorAll(".item");
querySelector 用 CSS 选择器语法，写 #id、.class、tag 都行，最灵活。

三、修改内容

const title = document.querySelector("#title");

title.textContent = "内容被修改了";      // 只改文字
title.innerHTML = "<strong>加粗文字</strong>";  // 可以解析 HTML

四、修改样式与属性

const box = document.querySelector(".box");

// 行内样式
box.style.color = "#3b6ef5";
box.style.backgroundColor = "#eaf0ff";

// 更推荐：切换 class，把样式写在 CSS 里
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("open");

// 修改属性
const img = document.querySelector("img");
img.setAttribute("src", "new.jpg");

五、监听事件

用 addEventListener 给元素绑定事件，用户操作时触发回调函数。

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  console.log("按钮被点击了");
});

六、完整小练习：点击计数

把上面几块合起来，做一个最简单的交互 demo：

<button id="btn">点我加一</button>
<span id="num">0</span>

<script>
  let count = 0;
  const btn = document.getElementById("btn");
  const num = document.getElementById("num");

  btn.addEventListener("click", () => {
    count++;
    num.textContent = count;
  });
</script>

打开页面点按钮，数字就会从 0 开始递增——这就是"让静态页面动起来"的最小例子。

七、小结