HTML DOM文档对象模型

这是一篇关于HTML DOM文档对象模型的思维导图，主要内容包括：五大节点，DOM对象方法，事件，DOM属性。对于初学者理解DOM操作非常有帮助。

HTML DOM 文档对象模型

• 五大节点
  • 文档节点
    • 整个html文档是文档节点
  • 元素节点
    • 每个html元素是元素节点
  • 文本节点
  • 属性节点
  • 注释节点
  • 示例图
    • 
• DOM对象方法
  • 通用方法
    • appendChild(node)
      • 将节点添加为当前节点的最后一个子节点。
    • removeChild(node)
      • 从当前节点移除指定子节点。
        • 能否在不引用父元素的情况下删除某个元素？ 很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素
    • replaceChild(newNode,oldNode)
      • 用新节点替换当前节点的某个子节点。
    • cloneNode(deep)
      • 克隆节点(deep=true时克隆所有子节点)。
    • contains(node)
      • 检查当前节点是否包含某个后代节点。
    • hasChildNodes()
      • 判断当前节点是否有子节点。
    • insertBefore(newNode，referenceNode)
      • 在指定子节点前插入新节点。
  • 节点特定方法
    • 元素节点
      • getAttribute(name
        • )获取元素指定属性的值。
      • setAttribute(name,value)
        • 设置元素的属性值。
      • removeAttribute(name)
        • 删除元素的指定属性。
      • querySelector(selector)
        • 在元素的后代中查找首个匹配选择器的节点。
      • querySelectorAll(selector)
        • 在元素的后代中查找所有匹配选择器的节点。
      • getBoundingClientRec
        • 获取元素的位置和尺寸信息（如宽高、坐标）。
      • insertAdjacentHTML(position,.html)
        • 在指定位置插入HTML字符串（如beforeend表示未尾）。
      • focus()/blur()
        • 让元素获取或失去焦点（如表单控件）。
    • 文本节点
      • splitText(offset)
        • 将文本节点从指定位置分割为两个节点
          • const textNode = document.createTextNode("Hello World"); const newNode = textNode.splitText(5); // 分割后：textNode="Hello"，newNode=" World"
    • 文档节点
      • getElementById(id)
        • 通过ID查找元素。
      • getElementsByClassName(className)
        • 通过类名查找元素集合。
      • getElementsByTagName()
        • 返回带有指定标签名的所有元素
          • node.getElementsByTagName("tagname"); document.getElementsByTagName("p");
      • createElement(tagName)
        • 创建新的元素节点。
      • createTextNode(text)
        • 创建新的文本节点。
      • createDocumentFragment()
        • 创建文档片段（用于高效批量操作DOM)。
• 事件
  • 事件处理方式
    • HTML属性绑定
      • <button onclick="alert('Hello')">点击</button> 缺点：混合结构与行为，可维护性差，仅支持单个处理函数
    • addEventListener()
      • 优势：支持多监听器、事件传播控制（useCapture参数），推荐使用 对比onclick：可绑定多个函数，支持捕获/冒泡阶段
    • DOM元素属性
      • myButton.onclick = function(event) { /* ... */ }; 缺点：同一元素同一事件只能绑定一个处理函数
  • 常用事件类型
    • 鼠标事件
      • click
        • 点击元素
      • mouseover/mouseout
        • 鼠标移入/移出元素
      • mousemove
        • 鼠标在元素内移动
      • 坐标属性
        • clientX/Y（视口坐标）、pageX/Y（文档坐标）、screenX/Y（屏幕坐标）
    • 键盘事件
      • keydown/keyup
        • 按下/释放按键
      • keyCode
        • 获取按键代码
    • 表单事件
      • submit
        • 表单提交
      • input
        • 输入内容变化
      • change
        • 值变化后触发
    • 窗口事件
      • load
        • 页面及资源加载完成
      • resize
        • 窗口大小变化
      • scroll
        • 滚动页面或元素
    • 移动端触摸事件
      • touchstart
        • 手指接触屏幕
      • touchmove
        • 手指滑动
      • touchend
        • 手指离开屏幕
      • 属性
        • touches
          • 当前触点列表
        • changedTouches
          • 状态变化的触点
  • 事件对象（Event）核心属性
    • target
      • 触发事件的原始元素
    • currentTarget
      • 当前处理事件的元素（可能与target不同）
    • type
      • 事件类型（如"click"）
    • bubbles
      • 事件是否冒泡
    • timeStamp
      • 事件触发时间戳
  • 事件传播机制
    • 三个阶段
      • 捕获阶段（Capture）
        • 从window向目标元素逐级向下传播
      • 目标阶段（Target）
        • 事件到达目标元素
      • 从目标元素向window逐级向上传播
        • 冒泡阶段（Bubble）
    • 控制传播方法
      • event.stopPropagation()
        • 阻止事件继续传播
      • event.stopImmediatePropagation()
        • 阻止其他监听器执行
      • event.preventDefault()
        • 阻止默认行为（如表单提交）
    • 事件修饰符（框架中常见）
      • prevent
        • 自动调用preventDefault()
      • stop
        • 自动调用stopPropagation()
      • once
        • 事件仅触发一次
• DOM属性
  • 通用属性
    • nodeType
      • 节点类型的数字标识（如 1 表示元素节点，3 表示文本节点）
    • nodeName
      • 节点名称（如元素节点的标签名，文本节点为 #text）
    • nodeValue
      • 节点值（文本节点的内容，属性节点的属性值，其他节点可能为 null）
    • childNodes
      • 子节点列表（NodeList）
    • parentNode
      • 父节点
    • previousSibling / nextSibling
      • 相邻兄弟节点
    • textContent
      • 所有子节点的纯文本内容（包括后代节点）
  • 节点特定属性
    • 元素节点
      • tagName
        • 获取标签名（如 "DIV"）
      • id / className
        • 元素的 id 和 class 属性
      • classList
        • 操作 class 的接口（如 add(), remove()）
      • attributes
        • 元素的属性集合（NamedNodeMap）
      • style
        • 行内样式对象
          • <p id="p1">Hello world!</p> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script>
      • innerHTML / outerHTML
        • 修改获取-内部/外部 HTML 内容
      • clientWidth / clientHeight
        • 元素可视宽高
    • 文本节点Text 类型
      • data
        • 文本内容（等同于 nodeValue）
      • wholeText
        • 合并相邻文本节点的完整文本（如果存在合并）
      • length
        • 文本长度
    • 注释节点（Comment 类型）
      • data
        • 注释内容（等同于 nodeValue）
    • 属性节点（Attr 类型）
      • name
        • 属性名
      • value
        • 属性值（等同于 nodeValue）
      • specified
        • 属性是否显式设置（布尔值）
    • 文档节点（Document 类型）
      • documentElement
        • 根元素（如 <html>）
      • head / body
        • 文档的 <head> 和 <body>
      • title
        • 文档标题
      • URL
        • 当前页面 URL