DOM
DOM 是 Document Object Model(文档对象模型)的缩写。
1、DOM节点
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点父(parent)、子(child)和同胞(sibling):
- 在节点树中,顶端节点被称为根(root)。
- 每个节点都有父节点、除了根(它没有父节点)。
- 一个节点可拥有任意数量的子节点。
- 同胞是拥有相同父节点的节点。
2、DOM方法
HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作。
文档操作方法 (Document Methods)
查找元素:
getElementById(id)
:通过元素的 ID 查找元素。getElementsByClassName(className)
:通过类名查找元素集合。getElementsByTagName(tagName)
:通过标签名查找元素集合。querySelector(selector)
:返回匹配选择器的第一个元素。querySelectorAll(selector)
:返回匹配选择器的所有元素。
创建和操作节点:
createElement(tagName)
:创建指定标签的元素。createTextNode(data)
:创建一个文本节点。createDocumentFragment()
:创建一个文档片段。importNode(node, deep)
:从其他文档导入节点。cloneNode(deep)
:克隆节点。
文档信息:
documentElement
:返回文档的根元素。body
:返回文档的<body>
元素。head
:返回文档的<head>
元素。
元素操作方法 (Element Methods)
属性和内容:
getAttribute(name)
/setAttribute(name, value)
:获取/设置元素属性。removeAttribute(name)
:移除属性。hasAttribute(name)
:检查是否存在属性。innerHTML
:获取或设置 HTML 内容。outerHTML
:获取或设置元素的整个 HTML 结构。textContent
:获取或设置元素的文本内容。
类名操作:
lassList.add(className)
:添加类名。classList.remove(className)
:移除类名。classList.toggle(className)
:切换类名。classList.contains(className)
:检查类名是否存在。
节点操作方法 (Node Methods)
添加和移除节点:
appendChild(node)
:添加子节点。insertBefore(newNode, referenceNode)
:在参考节点前插入新节点。removeChild(node)
:移除子节点。replaceChild(newNode, oldNode)
:用新节点替换旧节点。
节点信息:
childNodes
:获取所有子节点。firstChild
/lastChild
:获取第一个/最后一个子节点。parentNode
:获取父节点。nextSibling
/previousSibling
:获取下一个/上一个兄弟节点。
事件处理方法 (EventTarget Methods)
添加和移除事件监听:
addEventListener(type, listener, options)
:为事件类型添加监听器。removeEventListener(type, listener, options)
:移除事件监听器。
触发事件:
dispatchEvent(event)
:触发事件。
样式操作方法
直接操作样式:
style
:通过element.style.property
操作内联样式。
获取计算样式:
getComputedStyle(element)
:获取元素的计算样式。
高级方法
DOM 遍历和查询 (NodeIterator 和 TreeWalker):
createNodeIterator(root, whatToShow, filter)
:创建一个节点迭代器。createTreeWalker(root, whatToShow, filter)
:创建一个树遍历器。
范围操作 (Range):
createRange()
:创建一个 Range 对象。Range.selectNode(node)
:选择一个节点。Range.deleteContents()
:删除范围内的内容。
其他实用方法
滚动相关:
scrollTo(x, y)
:滚动到指定位置。scrollBy(dx, dy)
:相对滚动。scrollIntoView()
:滚动元素到可视范围。
焦点控制:
focus()
:聚焦元素。blur()
:移除元素焦点。
全屏操作:
requestFullscreen()
:请求全屏。exitFullscreen()
:退出全屏。
扩展功能
Shadow DOM:
attachShadow({ mode })
:创建 Shadow DOM。shadowRoot
:访问 Shadow DOM。
模板内容:
content
:获取<template>
的内容。
3、DOM属性
HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值。
文档属性 (Document Properties)
基本信息:
documentElement
:指向文档的根元素(通常是<html>
)。body
:指向文档的<body>
元素。head
:指向文档的<head>
元素。title
:获取或设置文档的标题。URL
:当前文档的完整 URL。domain
:当前文档的域名。referrer
:引用当前文档的 URL。cookie
:获取或设置与文档关联的 Cookie。
查找节点:
activeElement
:当前活动(聚焦)的元素。forms
:文档中所有<form>
元素的集合。images
:文档中所有<img>
元素的集合。links
:文档中所有<a>
元素(带href
属性)的集合。scripts
:文档中所有<script>
元素的集合。styleSheets
:文档中所有样式表的集合。
文档状态:
readyState
:文档加载状态(loading
、interactive
或complete
)。lastModified
:文档上次修改的时间。characterSet
:文档的字符集。
元素属性 (Element Properties)
基本结构:
tagName
:元素的标签名(大写形式,如DIV
)。id
:元素的 ID。className
:元素的类名。classList
:表示类名的动态列表,支持添加、移除、切换等操作。
内容和属性:
innerHTML
:获取或设置元素的 HTML 内容。outerHTML
:获取或设置元素的整个 HTML 结构。textContent
:获取或设置元素的文本内容。attributes
:元素的属性集合。dataset
:包含元素所有data-*
属性的键值对。
样式相关:
style
:内联样式对象。clientHeight
/clientWidth
:元素的可见区域高度和宽度(包括内边距,不包括边框和滚动条)。offsetHeight
/offsetWidth
:元素的整体高度和宽度(包括边框和内边距)。scrollHeight
/scrollWidth
:元素内容的高度和宽度(包括被隐藏的部分)。
位置信息:
offsetTop
/offsetLeft
:元素相对于包含块的偏移量。scrollTop
/scrollLeft
:元素的滚动条位置。
节点属性 (Node Properties)
节点信息:
nodeName
:节点名称(元素的标签名、文本节点为#text
等)。nodeType
:节点类型(1
表示元素,3
表示文本节点,9
表示文档)。nodeValue
:节点值(文本节点的内容)。
节点关系:
parentNode
:父节点。childNodes
:所有子节点的集合。firstChild
/lastChild
:第一个/最后一个子节点。previousSibling
/nextSibling
:前一个/后一个兄弟节点。
子元素快捷属性:
children
:所有子元素的集合。firstElementChild
/lastElementChild
:第一个/最后一个子元素。childElementCount
:子元素的数量。
事件相关属性
-
事件绑定:
onclick
/onmouseover
/onkeydown
等:绑定对应事件的处理函数。addEventListener
和removeEventListener
方法常用于替代这些属性。
-
事件状态:
isTrusted
:事件是否由用户触发(而非脚本)。defaultPrevented
:事件的默认操作是否被阻止。
文本节点属性 (Text Node Properties)
data
:文本节点的内容。length
:文本节点内容的长度。wholeText
:完整的文本内容。
样式和计算属性
style
:内联样式对象。currentStyle
(仅限 IE):元素的当前样式。getComputedStyle(element)
:获取元素的计算样式。
范围属性 (Range Properties)
commonAncestorContainer
:范围内所有节点的共同祖先节点。startContainer
/endContainer
:范围起点/终点的节点。startOffset
/endOffset
:起点/终点的偏移量。
Shadow DOM 属性
shadowRoot
:元素的 Shadow DOM。mode
:Shadow DOM 的模式(open
或closed
)。host
:Shadow DOM 的宿主元素。
4、DOM访问
通过DOM的方法和属性进行访问
示例:document.getElementById("main").getElementsByTagName("p");
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库