JavaScript DOM 一次讲透：什么是 DOM、怎样操作 DOM、事件到底如何用？（超清晰入门到能写逻辑）

---

🟡一、DOM 到底是什么？（用图让你一眼读懂）

DOM（Document Object Model）就是浏览器把网页变成一棵 可操作的树。
你能对网页上的任何元素进行访问、修改、删除，让网页“动起来”。

---

🟡二、为什么要学 DOM？

因为不会 DOM，你写出来的只是静态网页；
会 DOM，你就能写：

• 动态效果
• 逻辑交互
• 输入处理
• 定时器控制
• 组件行为

---

🟡三、如何获取 DOM？

最常用方法：

document.querySelector('选择器');

这是你控制网页所有元素的入口。

---

🟡四、如何修改样式？

let btn = document.querySelector('button');
btn.style.color = 'red';
btn.style.fontSize = '60px';

JS 修改样式必须使用 “驼峰写法”。

---

🟡五、如何获取标签内容 text/value？

文本：

p.innerHTML;

输入框：

input.value;

---

🟡六、事件：DOM 真正“活起来”的关键（已插入 input 示例）

事件的结构：

DOM.addEventListener(事件名, 回调函数)

✅ 1. 点击事件 click

点击按钮执行某段代码：

btn.addEventListener('click', ()=>{
    alert('你点击了按钮');
});

---

✅ 2. 输入事件 change

（输入完成 + 失焦 / 回车时触发）

let a = document.querySelector('.bot');

a.addEventListener('change', (e) => {
    console.log("【change事件】输入完成：", e.target.value);
});

---

⭐ 已插入：新增输入事件 input（实时监听，每敲一个字就触发）

a.addEventListener('input', (e) => {
    console.log("【input事件】实时输入：", e.target.value);
});

📌 作用说明：

事件	触发时机	行为
change	输入结束 + 失焦/回车	只触发一次
input（新增）	每输入一个字符就触发	实时监听

这是搜索框、聊天输入框等非常常用的写法。

---

🟡七、实战案例

⭐案例1：按钮点击让数字 +1

<button>点击＋1</button>
<div>0</div>

<script>
document.querySelector('button').addEventListener('click', () => {
    document.querySelector('div').innerHTML++;
});
</script>

---

⭐案例2：点击按钮关闭定时器

let c = setInterval(()=>{
    console.log('haha');
}, 3000);

document.querySelector('button').addEventListener('click', ()=>{
    clearInterval(c);
});

---

🟡八、总结：DOM 是前端的半壁江山

掌握了：

• DOM 是什么
• 获取 DOM
• 修改样式
• 获取文本/输入内容
• 事件（click / change / input）
• 实战案例（+1、关闭定时器）

你已经具备写大部分前端交互逻辑的能力。