页面上的按钮能点、列表能增删、文字能变颜色，背后都是 JavaScript 在操作 DOM。DOM（Document Object Model，文档对象模型）是浏览器把 HTML 解析出来的一棵节点树，页面里每个标签都对应一个 JS 对象。学会操作 DOM，写出来的代码才能真正"动"网页。

找到元素：querySelector 系列

操作任何元素之前，得先把它从页面里找出来：

// 假设页面里有 <h1 id="title">你好</h1> 和若干 .item 元素
const title = document.querySelector('#title');    // 按 CSS 选择器找第一个
const items = document.querySelectorAll('.item');  // 找所有匹配的

console.log(title.textContent); // 输出：你好
console.log(items.length);      // 输出：匹配到的元素个数

querySelector 只要传合法的 CSS 选择器就行：'#title'、'.box'、'ul > li:first-child' 都可以。老的 getElementById、getElementsByClassName 也能用，但日常记住 querySelector 这对组合就够覆盖几乎所有场景了。

修改内容和属性

const title = document.querySelector('#title');
title.textContent = '标题被改了';       // 改成纯文本
title.innerHTML = '标题被<b>改了</b>';   // 会把字符串解析成 HTML

const link = document.querySelector('a');
console.log(link.href);                 // 读取属性
link.href = 'https://example.com';      // 修改属性
link.setAttribute('target', '_blank');  // 通用写法：设置任意属性

textContent 和 innerHTML 的区别要分清：textContent 一律当纯文本处理，innerHTML 会真的解析标签。内容里如果拼了用户输入的东西，优先用 textContent，不然别人填个 <img onerror=...> 就可能被注入恶意代码。

修改样式与切换类名

const box = document.querySelector('.box');
box.style.color = 'tomato';          // 对应 CSS 的 color
box.style.backgroundColor = '#222';  // 带连字符的属性写成驼峰
box.style.fontSize = '20px';         // 别忘了单位

要改的样式一多，一个个赋值就很啰嗦，更好的做法是切换类名，让样式归 CSS 管：

box.classList.add('active');    // 加类
box.classList.remove('hidden'); // 删类
box.classList.toggle('dark');   // 有就删、没有就加，做开关特别顺手

创建和删除元素

const li = document.createElement('li'); // 新建一个元素，此时还没显示在页面上
li.textContent = '新来的列表项';
document.querySelector('ul').appendChild(li); // 挂到 ul 末尾，页面立刻多一行

li.remove(); // 不要了，直接移除

创建、设置内容、挂载，三步走。经典场景就是点「添加」按钮往待办列表里塞新条目。

监听事件：让页面响应用户

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  console.log('按钮被点了');
  const count = +btn.dataset.count + 1; // data-count 自定义属性
  btn.dataset.count = count;
  btn.textContent = `已点击 ${count} 次`;
});

addEventListener 第一个参数是事件类型，常用的还有 input（输入框打字）、submit（表单提交）、mouseover（鼠标移入）。回调函数里写的代码，会在事件发生的那一刻执行。

小结

  • querySelector 按 CSS 选择器找元素，querySelectorAll 找一批
  • textContent 改纯文本更安全，innerHTML 会解析标签
  • 改样式优先 classList 切类名，style 适合临时改一两个属性
  • createElement + appendChild 负责新增元素，remove() 负责删除
  • addEventListener 把函数和事件绑在一起，是页面交互的入口

先把查找和改内容练熟，再去看事件冒泡、事件委托这些进阶内容会轻松很多。