一、DOM 基础概念

• 掌握：

  • DOM 的定义：DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析成的一个树形结构，每个节点都是一个对象。

  • document 对象：它是 DOM 的入口，所有 DOM 操作都从 document 开始。

  • 节点类型：掌握常见的节点类型，如 元素节点（<div>）、文本节点、属性节点 和 注释节点。

• 理解：

  • DOM 树的结构：HTML 文档被解析为父子、兄弟等层级关系的节点树。

  • 根节点：<html> 是 DOM 树的根元素，document 是整个文档的根对象。

  • 节点之间的关系：父节点、子节点、兄弟节点、后代节点等术语的含义。

• 了解：

  • DOM 的历史与发展：DOM 是 W3C 标准，用于实现跨浏览器的脚本控制。

  • XML 与 HTML DOM 的区别：HTML DOM 是 XML DOM 的特例，专为网页设计优化。

二、DOM 元素选择与遍历

• 掌握：

  • 获取元素的方法：

    • document.getElementById()

    • document.querySelector() 和 document.querySelectorAll()

    • document.getElementsByClassName() 和 document.getElementsByTagName()

  • 遍历 DOM 的常用属性：

    • parentNode、childNodes、children

    • firstElementChild、lastElementChild

    • nextElementSibling、previousElementSibling

• 理解：

  • 选择器返回值的区别：getElementById 返回单个对象，getElementsByClassName 返回类数组对象，querySelectorAll 返回静态 NodeList。

  • 节点与元素的区别：childNodes 包含文本和注释节点，children 只包含元素节点。

• 了解：

  • 性能对比：querySelector 更灵活但略慢，原生方法如 getElementById 性能更高。

  • 兼容性问题：旧版 IE 不支持 querySelector，需注意项目环境。

三、DOM 操作与事件处理

• 掌握：

  • 修改元素内容：

    • innerHTML（可插入 HTML 标签）

    • textContent（仅文本，更安全）

  • 修改元素属性与样式：

    • element.setAttribute() 和 getAttribute()

    • element.style.property 直接修改行内样式

    • classList 操作类名（add、remove、toggle、contains）

  • 创建与删除节点：

    • document.createElement()

    • document.createTextNode()

    • parentNode.appendChild()、removeChild()

    • 新增方法：element.append()、prepend()、before()、after()、replaceWith()、remove()

• 理解：

  • 事件机制基础：

    • 事件绑定方式：onclick 属性、addEventListener() 方法

    • 事件对象 event 的常用属性：target、currentTarget、preventDefault()、stopPropagation()

  • 事件流：事件捕获 → 目标阶段 → 事件冒泡

  • 事件委托：利用事件冒泡原理，在父元素上监听子元素事件，提升性能。

• 了解：

  • 常见事件类型：click、input、change、submit、keydown、load、scroll 等。

  • 防抖与节流：在高频事件（如 scroll、resize）中优化性能。

  • 自定义事件：使用 Event 构造函数创建并触发自定义事件。