Skip to main content

5 posts tagged with "DOM"

View All Tags

DOM 中 closest 方法的作用是什么？举个例子

· 5 min read

closest() 是 DOM 元素方法，从自身开始沿父链向上查找第一个匹配 CSS 选择器的元素。

  1. 查找方向：自身 → 父 → 祖父 → <html>，找到即返回，否则返回 null
  2. 包含自身：当前元素就匹配时直接返回它，不是从父级才开始
  3. 接受任意选择器：标签、类、属性、伪类、复合选择器都支持
  4. 核心场景：事件委托、点击外部关闭、从子节点反查所属组件根
  5. 替代写法：等价于手写 while (el && !el.matches(sel)) el = el.parentElement

最佳实践：原生事件委托里只要涉及"从点击目标反查父级",优先用 closest(),别再手写 parentElement 循环。IE 不支持,老项目需 polyfill。

DOM 节点增删改查：现代 API 写法

· 4 min read

DOM 增删改查只记现代 API，老的 getElement 系列 + innerHTML 拼接可以忘了。

  1. 查询：querySelector / querySelectorAll 一对，覆盖 6 个老方法
  2. 插入：createElement + insertAdjacentHTML，比 appendChild 简洁
  3. 删除：el.remove() 一行替代 parentNode.removeChild 来回找
  4. 修改：dataset / classList / textContent，避免 innerHTML 拼接 XSS
  5. 2026 默认：框架项目里不要写裸 DOM API，那是 jQuery 时代肌肉记忆

DOM Node 基础概念

· 4 min read

DOM 里 Node 是基类，Element 只是 7 种节点之一——文本、注释、文档都是 Node 但 不是 Element。

  • 节点类型：日常打交道最多是 Element / Text / Comment / Document 四种
  • 三大属性：nodeName、nodeValue、textContent 各管一摊
  • nodeType：用 Node.ELEMENT_NODE 常量，禁硬编码数字
  • 父子关系：parentElement 只对 Element 父节点有值
  • NodeList：实时的 集合，遍历时增删子节点会变化