DOM（文档对象模型）是 JavaScript 与网页交互的核心。通过 DOM，你可以动态修改网页内容、样式和结构。以下是关键知识点：

一、基础概念 🌱

  • DOM 树：浏览器将 HTML 解析为树形结构，每个节点代表页面元素

    Document_Object_Model

  • 节点类型：包括元素节点（Element）、文本节点（Text）、属性节点（Attribute）等

    HTML_Element

二、常用操作 🛠️

1. 选择元素

document.getElementById("myId"); // 通过 ID 选择
document.querySelector(".myClass"); // 通过 CSS 选择器
document.querySelectorAll("div"); // 获取所有匹配元素

2. 修改内容

element.innerHTML = "新内容"; // 设置 HTML 内容
element.textContent = "纯文本"; // 设置纯文本内容
element.setAttribute("data-attr", "value"); // 设置属性

3. 事件处理

element.addEventListener("click", function() {
  alert("按钮被点击！");
});

三、实战示例 🧪

  1. 动态添加元素

    DOM_Manipulation

  2. 修改样式 

    element.style.color = "red"; // 直接修改样式
element.classList.add("active"); // 添加 CSS 类

  3. 遍历节点 

    const children = element.children; // 获取子元素
Array.from(children).forEach(child => {
  console.log(child);
});

四、注意事项 ⚠️

  • 注意 NodeList 是动态集合，随着页面变化会自动更新
  • 使用 textContent 可避免 XSS 攻击风险
  • 优先使用 querySelector 替代过时的 getElementById

扩展阅读 📚

深入了解 JavaScript DOM 基础
进阶：DOM 事件机制详解

通过实践掌握 DOM 操作，让你的网页更具互动性！📈