DOM 操作入门 —— 原来 JS 可以这样操控网页

学了一段时间的 JS 基础语法，我终于开始接触 DOM 操作了 —— 也就是用 JavaScript 去操控网页上的元素。
最基础的就是获取元素：
javascript
运行
// 通过ID获取
const box = document.getElementById('box');

// 通过选择器获取（最常用）
const item = document.querySelector('.item');
const items = document.querySelectorAll('.item');
获取到元素之后，就可以操作它了。修改内容、修改样式、增删类名：
javascript
运行
const btn = document.querySelector('#btn');
const box = document.querySelector('.box');

btn.addEventListener('click', function() {
// 修改内容
box.textContent = '内容被修改了';
// 修改样式
box.style.color = 'red';
// 切换类名
box.classList.toggle('active');
});
我做了一个点击按钮切换主题色的小 demo，点击一下按钮，整个页面的背景色和文字颜色就互换，那种 "动动手指就能改变页面" 的感觉特别奇妙。
还有创建和删除元素。我写了一个简易的待办事项列表：
javascript
运行
const addBtn = document.querySelector('#addBtn');
const list = document.querySelector('#list');
const input = document.querySelector('#input');

addBtn.addEventListener('click', function() {
const value = input.value.trim();
if (!value) return;

const li = document.createElement('li');
li.textContent = value;
list.appendChild(li);
input.value = '';
});
输入内容点击添加就能生成新的条目，虽然功能简单，但交互感拉满。
DOM 操作是前端开发的基本功，也是 JS 和网页产生联系的桥梁。把这些 API 练熟，后面做复杂交互才能得心应手。