DOM 基础的学习笔记

2026-07-19 · 阅读 4 分钟

HTML 写好的页面是"死"的，要让它动起来，就得靠 JS 去操作 DOM。DOM 可以理解成浏览器把 HTML 解析成的一棵树，JS 通过这棵树就能找到并修改页面上的任何东西。

找元素

// 按 id 找，最快
const box = document.getElementById('box');

// 按 CSS 选择器找，什么都能找
const firstButton = document.querySelector('.panel button');
const allItems = document.querySelectorAll('.item');

我现在基本只用 querySelector，因为它和写 CSS 选择器是同一套语法，不用额外记别的。

改内容和样式

// 改文字
const title = document.querySelector('h1');
title.textContent = '新标题';

// 改样式（能不用就不用，加 class 更好）
box.style.color = 'red';

// 加删 class，样式写在 CSS 里
box.classList.add('active');
box.classList.remove('hidden');
box.classList.toggle('done');

直接改 style 会把样式散得到处都是，所以更推荐把样式写在 CSS 的 class 里，JS 只负责切换 class。我这个站的变色圆环练习里改颜色是直接改 style 的，因为颜色一直在变，写成 class 不现实——要看场景。

改文字的两个属性

textContent 和 innerHTML 的区别：前者只会当纯文字处理，后者会解析 HTML 标签。如果内容里有用户输入的东西，用 innerHTML 有被注入脚本的风险（XSS），所以我习惯默认用 textContent，确定要插入自己写的 HTML 片段时才用 innerHTML。

小结

找元素、改内容、切换 class，这三招覆盖了我目前绝大多数的交互需求。找元素只是第一步，真正让页面"响应用户"靠的是事件监听。