一、变量声明：var、let、const
JavaScript 中有三种声明变量的方式：
var：ES5 及之前的标准写法，存在变量提升和函数作用域的问题。let：块级作用域，可重新赋值。const：块级作用域，不可重新赋值（但对象属性可变）。
✅ 推荐用法：
- 优先使用
const：语义更清晰，表示该变量不会被重新赋值。 - 如果发现后续需要修改变量值，再改用
let。
js
const PI = 3.14; // 不会被重新赋值
let count = 0;
count++; // 合法操作❓为什么 const 声明的对象可以修改属性？
因为 const 保证的是引用地址不变，而对象是引用类型，只要地址不变，里面的属性是可以修改的。
js
const person = { name: 'Tom' };
person.name = 'Jerry'; // ✅ 合法
person = {}; // ❌ 报错：Assignment to constant variable.🔍 建议 ：对于数组和对象，推荐使用
const来声明，防止意外改变引用地址。
二、Web APIs 简介
Web APIs 是浏览器提供给 JavaScript 使用的一些接口，主要用来操作网页内容（DOM）和浏览器功能（BOM）。
- DOM（文档对象模型）：用于操作 HTML 内容。
- BOM（浏览器对象模型）：用于操作浏览器窗口、历史记录、导航等。
三、DOM 操作详解
1️⃣ DOM 树的概念
HTML 文档以树状结构呈现，称为 DOM 树。它直观地展示了标签之间的父子关系，便于我们通过 JavaScript 遍历和操作页面元素。
2️⃣ 获取 DOM 元素
✅ 单个元素获取
js
const firstLi = document.querySelector('ul li:first-child');✅ 多个元素获取
js
const allLis = document.querySelectorAll('ul li');⚠️ 注意：
querySelectorAll()返回的是一个伪数组，不能直接调用pop()、push()等方法，必须通过遍历处理。
js
const lis = document.querySelectorAll('.nav li');
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}3️⃣ 修改元素内容
innerText vs innerHTML
| 方法 | 是否解析 HTML | 用途说明 |
|---|---|---|
innerText |
❌ 不解析 | 显示纯文本 |
innerHTML |
✅ 解析 | 插入 HTML 内容 |
js
const box = document.querySelector('.box');
box.innerText = '我是一个盒子'; // 显示纯文本
box.innerHTML = '<strong>我要更换</strong>'; // 显示加粗文字4️⃣ 修改样式
可以通过 .style 属性动态修改元素样式。
css
.box {
width: 200px;
}
js
const box = document.querySelector('.box');
box.style.width = '300px';四、实战案例：随机轮播图
数据结构
js
const sliderData = [
{ url: 'image1.jpg', title: '标题1', color: '#f00' },
{ url: 'image2.jpg', title: '标题2', color: '#0f0' },
// ...
];实现代码
js
const random = parseInt(Math.random() * sliderData.length);
const img = document.querySelector('.slider-wrapper img');
img.src = sliderData[random].url;
const p = document.querySelector('.slider-footer p');
p.innerHTML = sliderData[random].title;
const footer = document.querySelector('.slider-footer');
footer.style.backgroundColor = sliderData[random].color;
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`);
li.classList.add('active');五、表单与交互：倒计时按钮
HTML 结构
html
<button class="btn" disabled>我已经阅读用户协议(60)</button>JS 实现倒计时逻辑
js
const btn = document.querySelector('.btn');
let i = 5;
let timer = setInterval(() => {
i--;
btn.innerHTML = `我已经阅读用户协议(${i})`;
if (i === 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '同意';
}
}, 1000);效果预览
六、总结
const是首选，除非你需要重新赋值。- 对象和数组应使用
const声明，因其引用地址不变即可。 - DOM 操作是前端开发的基础技能，熟练掌握选择器和修改方法至关重要。
- 利用 Web APIs 可以轻松实现丰富的网页交互效果，如轮播图、倒计时按钮等。