导图社区 HTML DOM文档对象模型
这是一篇关于HTML DOM文档对象模型的思维导图,主要内容包括:五大节点,DOM对象方法,事件,DOM属性。对于初学者理解DOM操作非常有帮助。
编辑于2025-03-22 13:43:17HTML 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