JavaScript DOM 基础知识总结

🧠 什么是 DOM？

🌐 DOM（Document Object Model）是网页的结构化表示，可以用 JavaScript 去 操作 HTML 元素、内容、样式和事件。

HTML 网页 👉 被浏览器解析成一个「DOM 树」结构
JS 👉 操控这棵树上的各种元素、属性、事件

---

🔍 常见 DOM 操作汇总（必背）

📌 操作类型	方法/属性	示例	说明
🎯 获取元素	getElementById	document.getElementById("box")	通过 ID 选元素
	querySelector	document.querySelector(".btn")	选一个（支持 CSS 选择器）
	querySelectorAll	document.querySelectorAll("li")	选多个，返回 NodeList
🛠️ 修改内容	innerText / textContent	el.innerText = "你好"	改文字
	innerHTML	el.innerHTML = "<b>粗体</b>"	改内容，支持标签
🎨 修改样式	style	el.style.color = "red"	改 CSS
🎯 修改属性	setAttribute	el.setAttribute("src", "xx.jpg")	改标签属性
🆙 添加元素	appendChild	parent.appendChild(child)	尾部添加
❌ 删除元素	removeChild	parent.removeChild(child)	移除节点
⛓️ 父子关系	parentNode, children	el.parentNode	查结构关系
🧷 事件绑定	addEventListener	btn.addEventListener("click", fn)	添加事件监听

---

✨ 例子：点击按钮改变文字

<button id="btn">点我</button>
<p id="text">原始内容</p>

<script>
  const btn = document.getElementById("btn");
  const txt = document.getElementById("text");

  btn.addEventListener("click", function () {
    txt.innerText = "内容被改了！";
  });
</script>

---

🔑 小技巧：

✅ 推荐使用 querySelector，语法更灵活
✅ 修改样式优先考虑添加 class（用 classList.add()）
✅ 常用组合：document.querySelector + .addEventListener

---

🎯 一句话总结：

DOM 是 JS 操控网页的“入口”，记住获取元素、改内容、改样式、绑定事件，这四大核心就能写出很多交互效果！