变量声明规范
JavaScript 中的变量声明主要有 var、let 和 const 三种方式。虽然旧版本常用 var，但现代开发中更推荐 let 和 const。
var 存在变量提升现象，允许重复声明，且作用域仅限于函数或全局，容易在块级作用域（如 if、for）外被意外访问，导致逻辑错误。
let 不允许重复声明，不存在变量提升，必须先声明后使用，且具备块级作用域。
const 必须初始化赋值，同样具有块级作用域，适合声明不可变的常量或引用类型。
建议： 默认优先使用 const 避免意外修改，必要时使用 let，尽量避免使用 var。
DOM 元素获取与操作
获取 DOM 元素
在 CSS 选择器方面，我们通常使用 document.querySelector('selector') 获取第一个匹配元素，或使用 document.querySelectorAll('selector') 获取所有匹配元素（返回静态 NodeList），它们支持复杂的 CSS 选择语法。
- 类选择器
const firstItem = document.querySelector('.list-item');
const allItems = document.querySelectorAll('.list-item');
- ID 选择器
使用
#前缀匹配元素的id属性。
const name = document.querySelector('#username');
- 标签选择器 直接使用 HTML 标签名。
const body = document.querySelector('body');
除了上述方法，还可以通过以下标准 API 获取元素：
- 通过 ID 获取：
document.getElementById('id')，返回匹配的第一个元素，不存在则返回null。 - 通过类名获取：
document.getElementsByClassName('class')，返回动态的 HTML 集合（类数组对象）。 - 通过标签名获取：
document.getElementsByTagName('tag')，返回包含所有匹配标签的动态 HTML 集合。
修改元素内容与属性
内容修改
修改 DOM 元素内容主要通过 innerHTML、textContent 和 innerText 实现。
innerHTML：可解析 HTML 标签，适合动态插入带格式的内容。textContent：原样显示文本，忽略 HTML 标签。innerText：考虑 CSS 样式，不显示隐藏元素内容。
const element = document.getElementById('target');
element.innerHTML = '<strong>加粗文本</strong>'; // 解析 HTML
element.textContent = '<strong>纯文本显示</strong>'; // 不解析 HTML
属性修改
标准 HTML 属性可通过元素对象直接访问或使用 setAttribute 方法。自定义属性推荐使用 dataset 或 setAttribute 操作，移除属性使用 removeAttribute。
// 修改标准属性
const img = document.querySelector('img');
img.src = 'new-image.jpg'; // 直接属性赋值
img.setAttribute('alt', '新图片描述'); // 通用方法
// 操作自定义属性
img.setAttribute('data-custom', 'value');
const customValue = img.dataset.custom; // 通过 dataset 访问
批量处理
通过 querySelectorAll 获取节点列表后，可以使用 forEach 或 for 循环来遍历处理多个元素。
样式与类名操作
classList API
通过 classList 可以精确控制 CSS 类，相比直接修改 className 更安全且不易出错。
add(className)：添加一个或多个类名。remove(className)：删除一个或多个类名。toggle(className)：切换类名（存在则删除，不存在则添加）。contains(className)：判断是否包含某个类名，返回布尔值。replace(oldClass, newClass)：替换类名。
const box = document.getElementById('box');
box.classList.add('active'); // 添加类
box.classList.remove('inactive'); // 移除类
box.classList.toggle('visible'); // 切换类
box.classList.replace('big', 'small'); // 替换类
注意事项：
- 类名参数不要加
.（例如写add('active')而非add('.active')）。 - 所有方法都支持传入多个类名（用逗号分隔）。
- 兼容性良好，支持 IE10+ 及所有现代浏览器。
直接修改 style 属性
可以通过 JavaScript 直接修改元素的 style 属性，适用于动态调整样式或覆盖内联样式。注意 CSS 属性名需转换为驼峰命名（如 font-size 变为 fontSize），数字类样式必须带单位。
<!DOCTYPE html>
<html>
<body>
<div id="myBox">测试盒子</div>
<button onclick="changeStyle()">修改样式</button>
<script>
const box = document.getElementById('myBox');
function changeStyle() {
box.style.backgroundColor = 'red';
box.style.width = '200px';
box.style.height = '200px';
box.style.borderRadius = '10px';
}
</script>
</body>
</html>
常见样式属性包括 color、backgroundColor、fontSize、width/height、display 等。清空样式可将值设为空字符串。
表单数据获取
通过 ID 获取
最直接的方式是给表单元素设置唯一 id，然后用 document.getElementById() 获取元素，再通过 .value 属性拿到值。
<form>
<label>用户名：</label>
<input type="text" id="username"><br>
<label>密码：</label>
<input type="password" id="password"><br>
<button type="button" onclick="getFormValueById()">获取值</button>
</form>
<script>
function getFormValueById() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
console.log('用户名：', username);
console.log('密码：', password);
}
</script>
通过表单对象获取
先获取整个表单对象，再通过元素的 name 属性获取对应的值，适合表单元素较多的场景。
<form id="userForm">
<label>用户名：</label>
<input type="text" name="username"><br>
<label>爱好：</label>
<input type="checkbox" name="hobby" value="读书">读书
<input type="checkbox" name="hobby" value="运动">运动<br>
<button type="button" onclick="getFormValueByForm()">获取值</button>
</form>
<script>
function getFormValueByForm() {
const form = document.getElementById('userForm');
const username = form.username.value;
const hobbies = [];
form.hobby.forEach(item => {
if (item.checked) hobbies.push(item.value);
});
console.log('爱好：', hobbies);
}
</script>
H5 自定义属性 data-
定义与操作
自定义属性必须以 data- 为前缀，后面跟任意名称（建议小写、用连字符分隔）。在 JavaScript 中操作时，推荐使用 dataset，它会自动去掉 data- 前缀并将连字符转为驼峰命名。
<div id="user" data-id="1001" data-user-name="张三"></div>
const userDiv = document.getElementById('user');
console.log(userDiv.dataset.id); // 输出：1001
console.log(userDiv.dataset.userName); // 输出：张三
// 设置自定义属性
userDiv.dataset.age = 25;
// 删除自定义属性
delete userDiv.dataset.age;
注意： dataset 读取的值都是字符串类型，如果是数字或布尔值需要手动转换。不要存储敏感数据，因为可以在控制台直接查看。
定时器详解
JavaScript 提供了两种核心定时器函数，都属于 window 对象，分别用于一次性延时执行和周期性重复执行。
setTimeout：一次性延时
setTimeout() 用于指定一段时间后执行一次函数，执行后自动失效。
// 基础用法
const timerId = setTimeout(() => {
alert('3 秒到了！');
}, 3000);
// 停止任务
function stopMyTimeout() {
clearTimeout(timerId);
}
setInterval：周期性重复
setInterval() 用于每隔指定时间重复执行函数，直到手动停止。
let count = 10;
const intervalId = setInterval(() => {
count--;
if (count <= 0) {
clearInterval(intervalId);
alert('倒计时结束！');
}
}, 1000);
// 停止任务
function stopMyInterval() {
clearInterval(intervalId);
}
关键注意事项
- 异步特性：定时器的 delay 是'最早执行时间'，如果主线程有耗时任务（如复杂计算），定时器会等待主线程空闲后才执行。
- 清除定时器：页面卸载或组件销毁前，必须清除未执行的定时器，否则会导致内存泄漏。清除的前提是保存
timerId，不能使用匿名变量。
总结来说，setTimeout 适合单次延时任务，setInterval 适合轮询或倒计时。核心要点是理解其异步机制，并务必保存 timerId 以便及时清理。
