Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

文档对象模型（DOM）

技术

发布于：Jan 10, 2024

文档对象模型（DOM）

介绍

文档对象模型DOM是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象。方便编程语言与页面交互。
DOM 是用于建立网站的 Web API。设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的 API 获得。其通常通过 JavaScript来使用，也可以通过其他的语言来使用。

数据类型

下面的表格大致描述了dom中常用的数据类型。会在后文对其进行更详细的介绍。

数据类型 描述
Node 位于文档中的每个对象都是某种类型的节点。在一个 HTML 文档中，一个对象可以是一个元素节点，也可以是一个文本节点或属性节点。
Document 当一个成员返回 Document 对象，这个 Document 对象就是对象本身。
Element Element 类型是基于 Node 的。其指的是一个元素或一个由 DOM API 的成员返回的 Element 类型的节点。。
HTMLElement HTMLElement 类型基于Element，表示所有的 HTML 元素。

Node

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。
比如Document, Element, Attr, CharacterData等。
node 继承于 EventTarget 。EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器，详情看这里。

属性

属性 介绍
Node.childNodes 只读，返回一个包含了该节点所有子节点的实时的NodeList。
NodeList 是动态变化的。如果该节点的子节点发生了变化，NodeList对象就会自动更新。
Node.firstChild 只读，返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。
Node.isConnected 只读，该节点与 DOM 树连接返回 true, 否返回 false。
Node.lastChild 只读，返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。
Node.nextSibling 只读，返回与该节点同级的下一个节点 Node，如果没有返回null。
Node.nodeName 只读，若为元素节点，nodeName 属性和 tagName 属性返回相同的值，若是文本节点，nodeName 属性会返回 "#text"，而 tagName 属性会返回 undefined。
Node.nodeType 只读，返回一个与该节点类型对应的无符号短整型。常用的值如下：
1：元素节点element，对应常量Node.ELEMENT_NODE;
2：属性节点attr，对应常量Node.ATTRIBUTE_NODE;
3：文本节点text，对应常量Node.TEXT_NODE;
8：注释节点Comment，对应常量Node.COMMENT_NODE;
9：文档节点document，对应常量Node.DOCUMENT_NODE;
11：文档片断节点DocumentFragment，对应常量Node.DOCUMENT_FRAGMENT_NODE;
10：文档类型节点DocumentType，对应常量Node.DOCUMENT_TYPE_NODE。
Node.parentNode 只读，返回指定节点的父节点。元素的父节点可能是元素Element节点、文档Document节点、或是文档碎片DocumentFragment节点。若没有这样的节点，返回 null。
Node.parentElement 只读，返回当前节点的父节点Element，若该元素没有父节点，或父节点不是 DOM 元素，则返回 null。
Node.previousSibling 只读，返回前一个同辈节点 Node ，不存在返回 null。
Node.textContent 返回或设置一个元素内所有子节点及其后代的文本内容，包括 <script> 和 <style> 元素中的。可以防止 XSS 攻击。

方法

方法 介绍
Node.cloneNode(deep) deep:可选，默认false。
true：节点的所有后代节点也会被克隆，
false：只克隆节点本身。
返回Node副本节点的克隆对象，不会加入到 DOM 中。
Node.compareDocumentPosition(otherNode) 返回一个表示 Node 和 otherNode 在 Document 中关系的整数值。可能为：
1 常量名DOCUMENT_POSITION_DISCONNECTED：不在同一文档中;
2 常量名DOCUMENT_POSITION_PRECEDING：otherNode 在 node 之前;
4 常量名DOCUMENT_POSITION_FOLLOWING：otherNode 在 node 之后;
8 常量名DOCUMENT_POSITION_CONTAINS；otherNode 包含 node;
16 常量名DOCUMENT_POSITION_CONTAINED_BY：otherNode 被 node 包含。
Node.contains(otherNode) 返回一个布尔值，如果 otherNode 包含在节点 Node 返回 true，否返回 false。
Node.getRootNode(options) options： 可选 默认false 是否跳过 shadow Root 节点。返回根节点。
Node.hasChildNodes() 返回布尔值，是否有子节点.
Node.insertBefore(newNode, referenceNode) newNode：在子节点中插入的节点。
referenceNode：参考节点，会在其之前插入 newNode 节点。如果为 null，newNode 将被插入到所有子节点的末尾。不是可选参数。必须显式传递 Node 或 null。
返回添加的子节点。
Node.removeChild(child) child：要删除的子节点。移除一个子节点 child ，并返回移除的节点。
只要对被移除的子节点保持引用，其仍然存在于内存中，但不再是 DOM 的一部分。在以后的代码中仍可重复使用。如果不存储 返回值，也不保留其他引用，该节点将在短时间内在内存中自动删除。
Node.replaceChild(newChild, oldChild) newChild：用来替换 oldChild 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。
oldChild：被替换掉的原始节点。
替换当前节点的一个子节点，并返回被替换掉的节点。

Document

Document 表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是 DOM 树。
DOM 树包含了像 <body>、<table> 这样的元素，以及大量其他元素。其向网页文档本身提供了全局操作功能。
其承自 Node 和 EventTarget 接口。

属性

属性 介绍
Document.activeElement 只读，返回一个目前处于聚焦状态的 Element。
Document.body 返回当前文档的 <body> 节点。
Document.characterSet 只读，返回文档正在使用的字符集。
Document.childElementCount 只读，返回文档正在使用的子元素的数量。
Document.children 只读，返回当前文档HTMLCollection对象的子元素。
Document.documentElement 只读，返回当前文档Element 对象的直接子节点。
Document.documentURI 只读，以字符串的类型，返回当前文档的路径。
Document.firstElementChild 只读，返回当前文档的第一个子元素。
Document.forms 只读，返回当前文档中的 <form>元素的一个类型的集合。
Document.fullscreenElement 只读，返回文档中正处于全屏模式的元素。
Document.head 只读，返回当前文档的 <head> 元素。
Document.hidden 只读，返回一个布尔值，表明当前页面是否隐藏。
Document.images 只读，返回当前文档中所包含的图片的 HTMLCollection。
Document.lastElementChild 只读，返回当前文档的最后一个子元素。
Document.links 只读，返回一个包含文档中所有超链接的 HTMLCollection。
Document.pictureInPictureElement 只读，返回文档中正处于画中画模式的 Element。
Document.pictureInPictureEnabled 只读，若画中画特性可用，则返回 true。
Document.visibilityState 只读, 返回document的可见性。可用的值如下：
visible : 此时页面内容至少是部分可见。页面在前景标签页中，并且窗口没有最小化。
hidden : 此时页面对用户不可见。文档处于背景标签页、处于最小化状态或操作系统正处于锁屏状态。
prerender : 页面此时正在渲染中。

HTML 文件的 Document 接口继承自 HTMLDocument 接口。扩展了这些属性：

属性 介绍
Document.cookie 返回一个使用分号分隔的 cookie 列表，或设置一个 cookie。
Document.defaultView 只读，返回与文档关联的 window 对象，如果没有可用的对象，则返回 null。
Document.designMode 控制整个文档是否可编辑。有效值为 "on"、"off"。默认为 "off"。
Document.dir 获取或设置文档的文字方向，有效值为 'rtl'、'ltr'。
Document.lastModified 只读，返回文档最后修改时间的字符串，可转换为Date。
Document.location 只读，返回一个 Location 对象，包含有文档的 URL 相关的信息。
Document.readyState 只读，返回当前文档的加载状态。可以为：
loading（正在加载）：document 仍在加载。
interactive（可交互）：文档已被解析，但图像，样式表和框架之类的子资源仍在加载。
complete（完成）：文档和所有子资源已完成加载。
Document.referrer 只读，返回来源页面的 URI字符串。
Document.title 获取或设置 document 对象的标题。
Document.URL 只读，返回 document 对象的 URL 字符串。

方法

方法 介绍
Document.adoptNode(externalNode) externalNode：将要从另一份文档中转移的节点。
将externalNode从另一个文档转移至调用该方法的文档中。被转移的节点及其子树将会从原始文档中移除，并且它们的 ownerDocument 会变更为当前文档。然后节点将被插入到当前文档中。
返回导入文档的作用域中复制的mportedNode。
Document.append(...paramN) ...paramN：要插入的一组 Node 或字符串对象。
在文档的最后一个子节点后插入一组节点对象或字符串对象。字符串对象被插入为相同文本节点，不会被解析。
返回 undefined 。
Document.createAttribute(name) name：要创建属性对象的属性名。
返回一个新的属性节点 Attr 。
Attr 添加 value 后可用于为元素添加对应的属性。
Document.createDocumentFragment() 创建并返回一个新的空白的文档片段 DocumentFragment。
其被作为一个轻量版的 Document 使用，最大的区别是其变化不会触发 DOM 树的重新渲染，用于性能优化。
Document.createElement(tagName) tagName：要创建元素类型的字符串。
创建并返回一个由标签为 tagName 类型为 Element的 HTML 元素。
Document.createElementNS(namespaceURI, qualifiedName) namespaceURI：与元素相关联的命名空间 URI 的字符串。
qualifiedName：指定要创建的元素的类型的字符串。
创建并返回一个具有指定的命名空间 URI 和限定名称的 Element 元素。
Document.createTextNode(str) str：要放入文本节点的字符串。
创建并返回包含str内容的文本节点。该方法将自动转义 HTML 字符。
Document.getElementById(id) 方法返回一个表示 id 属性与字符串相匹配的元素的 Element 对象。
Document.getElementsByClassName(class_name) 返回一个包含所有指定class_name的子元素的伪数组对象。
其可以在任何元素上调用。调用这个方法的元素将作为本次查找的根元素。
Document.getElementsByTagName(tag_name) tag_name：要检索的标签名，可以使用*来表示所有元素
返回一个包含所有tag_name标签名元素的 HTML 集合。
Document.importNode(externalNode, deep) externalNode：要拷贝的Node节点。
deep：(可选)是否要拷贝整个 DOM 子树。默认为 false。
返回externalNode的拷贝。
Document.prepend(...paramN) ...paramN：要插入的 Node 或字符串。
在第一个子节点前插入一个 ...paramN。返回 undefined 。
Document.querySelector(selectors) selectors：CSS 选择器字符串
返回文档中 selectors 选择器匹配的第一个 Element 对象。若找不到匹配项返回 null 。
Document.querySelectorAll(selectors) selectors：CSS 选择器字符串
返回文档中 selectors 选择器匹配的所有 Element 对象，并装入一个静态 NodeList中返回，若找不到匹配项返回空 NodeList。

HTML 文件的 Document 接口继承自 HTMLDocument 接口。扩展了这些方法：

方法 介绍
Document.close() 关闭用于写入的文档流。
Document.open() 打开用于写入的文档流。
将会导致所有事件监听器与节点被清除。
Document.getElementsByName(name) name：要查找元素 name 属性的值。
返回一个包含 name 属性的所有元素的实时 NodeList 集合。
Document.hasFocus() 方法返回 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。

Element

Document 中的所有元素对象都继承自Element。Element具有各种元素共有的方法和属性。
Element继承于 Node。

属性

Element 从其父接口 Node 以及该接口的父接口 EventTarget 继承了一些属性如下：

属性 介绍
Element.attributes 只读，返回一个 NamedNodeMap 对象，其中包含相应 HTML 元素的指定属性。
Element.childElementCount 只读，返回此元素的子元素个数，不包括空节点。
Element.children 只读，返回此元素的子元素，包括空节点。
Element.classList 只读，返回一个 DOMTokenList ，其中包含该元素所有的 class 属性。
Element.className 返回一个字符串，表示这个元素的类。
Element.clientHeight 只读，返回代表元素内部高度的数值。
Element.clientLeft 只读，返回代表元素左边界宽度的数值。
Element.clientTop 只读，返回代表元素顶部边框宽度的数值。
Element.clientWidth 只读，返回代表元素内部宽度的数值。
Element.firstElementChild 只读，返回除空元素之外的第一个子元素。
Element.id 返回一个字符串，表示此元素的 id 值。
Element.innerHTML 返回一个字符串，表示元素内容。
Element.lastElementChild 只读，返回除空元素之外的最后一个子元素。
Element.localName 只读，一个字符串，代表元素限定名称的本地部分。
Element.namespaceURI 只读，元素对应的命名空间 URI，如果没有则返回 null。
Element.nextElementSibling 只读，一个 Element，树中紧跟给定元素的元素，如果没有同级节点，则为 null。
Element.outerHTML 一个字符串，代表元素的标记。作为 setter 使用时，将用从给定字符串解析出的节点替换元素。
Element.part 代表元素的部分标识符，以 DOMTokenList的形式返回。
Element.scrollHeight 只读，元素滚动视图高度的数值。
Element.scrollLeft 元素左滚动偏移量的数值。
Element.scrollLeftMax 非标准只读，元素可能的最大左滚动偏移值。
Element.scrollTop 元素顶部垂直滚动的像素数。
Element.scrollTopMax 非标准只读，元素可能的最大顶部滚动偏移值。
Element.scrollWidth 只读，代表元素滚动视图宽度的数值。
Element.tagName 只读，返回一个字符串，包含给定元素的标签名称。

更多属性参考

方法

Element 继承 Node 及其父接口 EventTarget 的方法。

方法 介绍
Element.before(node1, node2, … , nodeN) 在其父节点的子节点列表中插入一些 Node 或 DOMString 对象。插入位置为该节点之前。DOMString 对象会被以 Text 的形式插入。
Element.after(node1, node2, … , nodeN) 在其父节点的子节点列表中插入一些 Node 或 DOMString 对象。插入位置为该节点之后。DOMString 对象会被以 Text 的形式插入。
Element.animate(keyframes, options) keyframes：关键帧对象数组，或一个关键帧对象。
options:动画持续时间的整数，以毫秒为单位。
将动画应用于元素，然后运行动画。并返回一个新建的 Animation 对象实例。
Element.append(param1, param2, …, paramN) 在 Element 的最后一个子节点之后插入一组 Node 对象或字符串对象。被插入的字符串对象等价为 Text 节点。
Element.closest(selectors) selectors：指定的选择器。
返回匹配特定选择器且离当前元素最近的祖先元素或当前元素本身。如果匹配不到，则返回 null。
Element.getAttribute(attributeName) attributeName：字符串，指定的属性值。
返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null。
Element.getAttributeNames() 返回一个Array，其中包含元素的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。
Element.getAttributeNode(attrName) attrName：字符串，属性名。
返回Attr节点，表示元素的attrName属性。
Element.getBoundingClientRect() 返回DOMRect对象，其提供了元素的大小及其相对于视口的位置。
Element.getElementsByClassName(ClassName) 返回一个即时更新的HTMLCollection，包含了所有拥有指定 ClassName 的子元素。
Element.getElementsByTagName(TagName) 返回一个即时更新的HTMLCollection，包含了所有拥有指定 TagName 的子元素。
Element.hasAttribute(name) 返回元素的name属性是否存在的布尔值。
Element.hasAttributes() 返回布尔值，表示是否具有 HTML 属性。
Element.insertAdjacentElement(position, element) position：插入位置的字符串其需为以下字符串之一。beforebegin该之前，afterbegin该元素的第一个子节点之前，beforeend该元素的最后一个子节点之后，afterend该元素之后。
element：要插入的元素。
返回插入的元素，插入失败则返回 null。
Element.insertAdjacentHTML(position, text) position：同上
text：要被解析为 HTML 的文本。
返回插入的元素，插入失败则返回 null，其避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快。
Element.prepend(param1, param2, …, paramN) 在第一个子节点之前插入一组 Node 对象或字符串。无返回值。
Element.querySelector(selectors) selectors：选择器。
返回与selectors匹配的元素的后代的第一个元素。
Element.querySelectorAll(selectors) 返回一个静态的 NodeList，其包含所有匹配元素的节点。
Element.remove(param) 删除指定节点。
Element.removeAttribute(attrName) 移除当前元素上attrName的属性。
Element.replaceChildren(param1, param2, …, paramN) 替换该元素子节点。若没有指定替代对象时，所有后代都将被清空。
Element.replaceWith(param1, param2, …, paramN) 替换该元素父节点的子节点包括其本身。若没有指定替代对象时，所有子节点都将被清空。
Element.scroll(x-coord, y-coord)/
Element.scroll(options)		 x-coord：水平轴的像素。
y-coord：垂直轴的像素。
options：包含以下参数的对象。
top-水平轴的像素;
left-垂直轴的像素;
behavior-其中 smooth 表示平滑滚动并产生过渡效果、auto 或缺省值会直接跳转到目标位置，没有过渡效果。
使元素滚动到某个特定坐标。
Element.scrollBy(x-coord, y-coord)/
Element.scrollBy(options)		 参数同上。
使元素滚动一段特定距离。
Element.scrollTo(x-coord, y-coord)/
Element.scrollTo(options)		 参数同上。
使界面滚动到给定元素的指定坐标位置。
Element.scrollIntoView(alignToTop)/
Element.scrollIntoView(scrollIntoViewOptions)		 alignToTop：可选，一个布尔值，默认为true。true元素的顶端将和其所在滚动区的可视区域的顶端对齐。false元素的底端将和其所在滚动区的可视区域的底端对齐。
scrollIntoViewOptions：可选，一个包含下列属性的对象。
behavior-定义滚动是立即的还是平滑的动画，其中smooth平滑的动画、instant通过一次跳跃立刻发生、auto由 scroll-behavior 的计算值决定;
block-定义垂直方向的对齐，start、center、end 或 nearest 默认为 start;
inline-定义水平方向的对齐，start、center、end 或 nearest默认为 nearest。
滚动元素的父容器，使元素可见。
Element.setAttribute(name, value) name：属性名。 value：属性值。
设置指定元素上的name属性为value。
Element.setAttributeNode(attribute) attribute：添加Attr的节点。
添加属性节点。

HTMLElement

HTMLElement 接口表示所有的 HTML 元素。
HTMLElement继承自 Element 。

属性

属性 介绍
HTMLElement.contentEditable String类型，表明元素是否是可编辑。
可能为以下几种值：true：可编辑。
false：不可编辑。
plaintext-only：可以纯文本格式编辑，富文本格式会被禁用。
inherit：继承了其父元素的可编辑状态。
HTMLElement.dir String类型，表明元素的文本书写方向。
可能为以下几种值：ltr：表示从左到右。
rtl：表示从右到左。
auto：表示元素的方向必须根据元素的内容来确定。
HTMLElement.draggable 元素是否可以拖拽。
HTMLElement.hidden 元素是否隐藏。
HTMLElement.lang String类型，元素属性值或文本内容的基语言。
en：英语、zh-cn：简体中文、ja：日语。
HTMLElement.offsetHeight 只读，元素自身可视高度加上上下内边距和边框的像素值。
HTMLElement.offsetWidth 只读，元素自身可视宽度加上左右内边距和边框的像素值。
HTMLElement.offsetTop 只读，元素顶部相对于父节点顶部的像素值。
HTMLElement.offsetLeft 只读，元素左上角相对于父节点的左边界偏移的像素值。
HTMLElement.offsetParent 只读，元素的父元素。
HTMLElement.style 只读，元素的内联样式以实时的CSSStyleDeclaration对象表示。
HTMLElement.title 元素的 title 属性。
HTMLElement.translate 元素是否可以被翻译。

事件

事件是由 DOM 元素产生的资源，可以由 JavaScript 代码操控。

EventTarget

EventTarget 接口由可以接收事件、并且可以创建侦听器的对象实现。
Element 及其子项、document 与 window 是最常用的事件目标。

注册事件

EventTarget.addEventListener(type, listener, useCapture)

  • type：事件名称，大小写敏感。
  • listener：监听函数。事件发生时，会调用该监听函数。可以拿到表示点击对象的 Event 。
  • useCapture：(可选)布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false（在冒泡阶段触发）。
    其除了是一个布尔值，还可以是一个对象还可以是一个属性配置对象。该对象有以下属性：
    • capture：布尔值，表示该事件是否在捕获阶段触发监听函数。
    • once：布尔值，表示监听函数是否只触发一次，然后就自动移除。
    • passive：布尔值，表示监听函数不会调用事件的preventDefault方法。如果监听函数调用了，浏览器将忽略这个要求，并在监控台输出一行警告。

移除事件

EventTarget.removeEventListener(type, listener)
用来移除addEventListener方法添加的事件监听函数。该方法没有返回值。其参数与addEventListener一致。
移除的监听函数，必须是addEventListener方法添加的那个监听函数，且必须在同一个元素节点，否则无效。

EventTarget.dispatchEvent()

EventTarget.dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回false，否为true。

target.dispatchEvent(event)
其的参数为Event对象。若参数为空，或不是一个有效的事件对象，将报错。

1
2
3
4
5
6
7
8
9
10
11
// 当前节点触发了click事件。
para.addEventListener("click", hello, false);
var event = new Event("click");
para.dispatchEvent(event);
// 根据dispatchEvent方法的返回值，判断事件是否被取消了。
var canceled = !cb.dispatchEvent(event);
if (canceled) {
	console.log("事件取消");
} else {
	console.log("事件未取消");
}

Event

事件发生以后，会产生一个事件对象Event，作为参数传给监听函数。所有的事件都是这个对象的实例，或继承了Event.prototype对象。

构造函数

new Event(type, options)
构造函数接受两个参数。

  • type：字符串，表示事件的名称。
  • options：(可选)是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
    • bubbles：(可选)布尔值，默认为false，表事件对象是否冒泡。
    • cancelable：(可选)布尔值，默认为false，表事件是否可以被取消。
    • composed：(可选)布尔类型，默认为 false，表事件是否会在影子 DOM 根节点之外触发侦听器。

实例属性

属性 介绍
Event.bubbles 只读，表示该事件是否会在 DOM 中冒泡。
Event.cancelable 只读，表示事件是否可以取消。
Event.currentTarget 只读，返回一个EventTarget，表示当前事件处理器所附加的对象。子元素被触发也只返回父元素。
Event.defaultPrevented 只读,表示是否取消了事件的默认行为。
Event.target 只读，返回一个EventTarget，表示当前事件处理器所的对象。谁触发返回谁。
Event.type 只读，返回字符串，表示事件类型的名称。

实例方法

方法 介绍
Event.preventDefault() 取消浏览器对当前事件的默认行为。事件对象的cancelable属性为true才能生效。
Event.composedPath() 返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点。
例：[p, div, body, html, document, Window]。
Event.stopPropagation() 阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。
Event.stopImmediatePropagation() 阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。

鼠标事件

事件 介绍
click 按下鼠标时触发。
dblclick 在同一个元素上双击鼠标时触发。
mousedown 按下鼠标键时触发。
mouseup 释放按下的鼠标键时触发。
mousemove 当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
mouseenter 鼠标进入一个节点时触发，进入子节点不会触发这个事件。
mouseover 鼠标进入一个节点时触发，进入子节点会再一次触发这个事件。
mouseout 鼠标离开一个节点时触发，离开父节点也会触发这个事件。
mouseleave 鼠标离开一个节点时触发，离开父节点不会触发这个事件。
contextmenu 按下鼠标右键时触发。
wheel 滚动鼠标的滚轮时触发。

MouseEvent

MouseEvent接口代表了鼠标相关的事件。继承了Event拥有其所有属性和方法。该接口还有自己的属性与方法。

实例属性
属性 介绍
MouseEvent.screenX 鼠标相对于屏幕的水平位置，设置该属性不会移动鼠标。
MouseEvent.screenY 鼠标相对于屏幕的垂直位置，其他与screenX相同。
MouseEvent.clientX 鼠标相对于程序窗口的水平位置，默认值为0，设置该属性不会移动鼠标。
MouseEvent.clientY 鼠标相对于程序窗口的垂直位置，其他与clientX相同。
MouseEvent.ctrlKey 是否同时按下了 Ctrl 键。
MouseEvent.shiftKey 是否同时按下了 Shift 键。
MouseEvent.altKey 是否同时按下 Alt 键。
MouseEvent.metaKey 是否同时按下 Meta 键。
MouseEvent.button 表示按下了哪一个鼠标按键。
0：默认值，按下主键（左键）或者当前事件没有定义这个属性。
1：按下辅助键（中键）。
2：表示按下次键（通右键）。
MouseEvent.buttons 表示按下了鼠标的哪些键。一个三个比特位的二进制值。
0/000b：默认值，没有按下任何键。
1/001b：按下主键。
2/010b：按下次键。
4/100b：按下辅助键。
若返回3/011b：表示同时按下了左键和右键。
MouseEvent.relatedTarget 表示事件的相关节点，默认为null。触发mouseenter和mouseover事件时，表示鼠标刚刚离开的那个元素节点；mouseout和mouseleave事件时，表示鼠标正在进入的那个元素节点。
实例方法
方法 介绍
MouseEvent.getModifierState(Key) 如果指定的Key被按下或激活，则方法返回 true。
Key可以为：Alt、AltGraph、Control、Meta、Shift、CapsLock、NumLock、ScrollLock。

WheelEvent

WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。

实例属性
属性 介绍
WheelEvent.deltaX 只读，滚轮的水平滚动量。
WheelEvent.deltaY 只读，滚轮的垂直滚动量。
WheelEvent.deltaZ 只读，滚轮的 Z 轴滚动量。
WheelEvent.deltaMode 只读，表示滚动量的 delta 值的单位。0：像素。1：行。2：页。

键盘事件

事件 介绍
keydown 在某个键被按下时触发。
keyup 在释放按键时触发。
keypress 按下非功能键时触发。

KeyboardEvent

KeyboardEvent接口用来描述用户与键盘的互动。其继承了Event。

实例属性
属性 介绍
KeyboardEvent.key 当前按下的键名。
KeyboardEvent.code 表示当前按下的键的字符串形式。
可能为：0 ~ 9：digital0 ~ digital9
A ~ z：KeyA ~ KeyZ
F1 ~ F12：F1 ~ F12
方向键：ArrowDown、ArrowUp、ArrowLeft、ArrowRight
Alt 键：AltLeft、AltRight
Shift 键：ShiftLeft、ShiftRight
Ctrl 键：ControlLeft、ControlRight。
KeyboardEvent.location 整数，当前按下的键的位置。
0：处在键盘的主区域。
1：处在键盘的左侧，只适用那些有两个位置的键。
2：处在键盘的右侧，只适用那些有两个位置的键。
3：处在数字小键盘。
KeyboardEvent.ctrlKey 是否按下 Ctrl 键。
KeyboardEvent.shiftKey 是否按下 Shift 键。
KeyboardEvent.altKey 是否按下 Alt 键。
KeyboardEvent.metaKey 是否按下 Meta 键。
KeyboardEvent.repeat 是否重复按键。
实例方法
方法 介绍
KeyboardEvent.getModifierState(key) 如果指定的Key被按下或激活，则方法返回 true。
Key可以为：Alt、AltGraph、Control、Meta、Shift、CapsLock、NumLock、ScrollLock。

进度事件

事件 介绍
abort 外部资源中止加载时触发。如果发生错误导致中止，不会触发该事件。
error 由于错误导致外部资源无法加载时触发。
load 外部资源加载成功时触发。
loadstart 外部资源开始加载时触发。
loadend 外部资源停止加载时触发，发生顺序排在error、abort、load等事件之后。
progress 外部资源加载过程中不断触发。
timeout 加载超时时触发。

ProgressEvent

ProgressEvent接口主要用来描述外部资源加载的进度

实例属性
属性 介绍
ProgressEvent.lengthComputable 表示加载的总量是否可以计算。
ProgressEvent.loaded 表示已经加载的量。
ProgressEvent.total 表示需要加载的总量。

表单事件

事件 介绍
input 当<input>、<select>、<textarea>的值发生变化时触发。
select 当选中<input>、<textarea>中的文本时触发。
chang 当<input>、<select>、<textarea>的值修改完成，失去焦点时触发。
invalid 提交表单时不满足校验条件时触发。
reset 当表单对象<form>重置时触发。
submit 当表单对象<form>向服务器提交时触发。

InputEvent

InputEvent用来描述input事件。其继承自Event接口。

实例属性
属性 介绍
InputEvent.data 只读，返回包含插入字符的字符串，如果更改没有插入文本则为空字符串。
InputEvent.dataTransfer 只读，返回一个 DataTransfer 对象，包含了关要添加到可编辑内容，或从可编辑内容中删除的富文本或纯文本数据的信息。
InputEvent.inputType 只读，返回对可编辑内容所做更改的类型，有许多可能的值，如 insertText、deleteContentBackward、insertFromPaste 、formatBold、….。
InputEvent.isComposing 只读，返回该事件是否在触发 compositionstart 事件之后且触发 compositionend 事件之前触发。
实例方法
方法 介绍
InputEvent.getTargetRanges() 返回一个 StaticRange 对象数组，如果不取消输入事件，该数组将受到 DOM 更改的影响。

触摸事件

事件 介绍
touchcancel 在一个或多个接触点以特定于实现的方式中断时触发。
touchend 在从接触面移除一个或多个接触点时触发。
touchmove 在一个或多个接触点沿接触面移动时触发。
touchstart 在向接触面放置一个或多个接触点时触发。

TouchEvent

继承了 Event 接口，表示由触摸引发的事件实例

实例属性
属性 介绍
TouchEvent.touches TouchList类型，所有当前处于活跃状态的触摸点。
TouchEvent.targetTouches TouchList类型，所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点。
TouchEvent.changedTouches TouchList类型，本次触摸事件的相关触摸点。
TouchEvent.ctrlKey Ctrl 键是否同时按下。
TouchEvent.shiftKey Shift 键是否同时按下。
TouchEvent.altKey Alt 键是否同时按下。
TouchEvent.metaKey Meta 或 Windows 是否同时按下。

Touch

代表单个触摸点。

Touch属性
属性 介绍
identifier 触摸点的唯一 ID。
target 触摸点开始时所在的网页元素。
clientX 触摸点相对于浏览器窗口左上角的水平距离。
clientY 触摸点相对于浏览器窗口左上角的垂直距离。
screenX 触摸点相对于屏幕左上角的水平距离。
screenY 触摸点相对于屏幕左上角的垂直距离。
pageX 触摸点相对于网页左上角的水平位置，包括页面的滚动距离。
pageY 触摸点相对于网页左上角的垂直位置，包括页面的滚动距离。
radiusX 触摸点周围受到影响的椭圆范围的 X 轴半径。
radiusY 触摸点周围受到影响的椭圆范围的 Y 轴半径。
rotationAngle 触摸区域的椭圆的旋转角度，单位为度数deg，在0到90之间。
force 触摸压力。范围在0到1之间。

拖放事件

事件 介绍
drag 拖动元素或选择的文本时每几百毫秒触发一次。
dragend 在拖动操作结束（通过释放鼠标按钮或按下退出键）时触发。
dragenter 在拖动的元素或选择的文本进入有效的放置目标时触发。
dragleave 在拖动的元素或选择的文本离开有效的放置目标时触发。
dragover 在拖动的元素或选择的文本在有效的放置目标时触发（每几百毫秒）。
dragstart 在用户开始拖动元素或选择的文本时触发。
drop 在元素或选择的文本被放置在有效的放置目标时触发。

DragEvent

继承了MouseEvent与Event。

实例属性
属性 介绍
DragEvent.dataTransfer 只读,DataTransfer类型，在拖放交互期间传输的数据。

DataTransfer

用于保存拖动并放下过程中的数据。

实例属性
属性 介绍
DataTransfer.dropEffect 获取当前选定的拖放操作类型或者设置的为一个新的类型。值可能为 none, copy, link 或 move。
DataTransfer.effectAllowed 可用的操作类型。值可能为 none, copy, copyLink, copyMove, link, linkMove, move或all。
DataTransfer.files 包含数据传输中可用的所有本地文件的列表。
DataTransfer.items 只读，包含所有拖动数据列表的 DataTransferItemList 对象。
DataTransfer.types 只读，一个提供 dragstart 事件中设置的格式的 strings 数组。
实例方法
方法 介绍
DataTransfer.setDragImage(imgElement, xOffset, yOffset) imgElement：用于拖曳反馈图像的 Element 元素。
xOffset：图片相对于鼠标指针的x轴偏移量。
yOffset：图片相对于鼠标指针的y轴偏移量。
发生拖动时，从拖动目标生成半透明图像，并在拖动过程中跟随鼠标指针。
DataTransfer.clearData(format) format：可选， string ，指定要删除的数据类型。
如果此参数为空字符串或未提供，则将删除所有类型的数据。删除与给定类型关联的数据。
DataTransfer.getData(format) format：可选， string ，指定要获取的数据类型。
返回检索给定类型数据的字符串。
DataTransfer.setData(format, data) format：string ，数据类型。
data：string ，要添加的数据。
设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。

动画事件

事件 介绍
animationcancel 在动画意外中止时触发。
animationend 在动画正常完成时触发。
animationiteration 在动画迭代完成时触发。
animationstart 在动画开始时触发。

剪切板事件

事件 介绍
copy 使用复制操作时触发。
cut 使用剪切操作时触发。
paste 使用粘贴操作时触发。

全屏事件

事件 介绍
fullscreenchange 进入或退出全屏模式时触发。
fullscreenerror 在尝试进入或退出全屏模式而发生错误时触发。

加载和卸载事件

事件 介绍
DOMContentLoaded 在文档完全加载并解析后触发，无需等待样式表、图像和子框架完成加载。
readystatechange 在文档的 readyState 属性发生变化时触发。

指针事件

事件 介绍
gotpointercapture 在使用 setPointerCapture() 捕获元素时触发。
lostpointercapture 在捕获指针释放时触发。
pointercancel 在指针事件取消时触发。
pointerdown 在指针变为活动状态时触发。
pointerenter 在指针移入到元素或其子元素之一的命中测试边界时触发。
pointerleave 在指针移出元素的命中测试边界时触发。
pointerlockchange 在指针被锁定或解锁时触发。
pointerlockerror 在指针锁定失败时触发。
pointermove 在指针坐标改变时触发。
pointerout 在指正移除元素的命中测试边界时触发。
pointerover 在指针移入元素的命中测试边界时触发。
pointerup 在指针不再活动时触发。

选择事件

事件 介绍
selectionchange 在文档中的选中的文本发生改变时触发。

过渡事件

事件 介绍
transitioncancel 在 CSS 过渡取消时触发。
transitionend 在 CSS 过渡完成时触发。
transitionrun 在 CSS 过渡第一次创建时触发。
transitionstart 在 CSS 过渡实际开始时触发

其他事件

事件 介绍
beforescriptexecute 在静态的 <script> 开始执行脚本时触发。
scroll 在滚动文档视图或元素时触发。
visibilitychange 在变前的内容变为可见、隐藏时触发。
resize 当窗口大小改变时触发。

参考资料

DOM 现行标准
面向开发者的 Web 技术 Web API 文档对象模型（DOM）
阮一峰 JavaScript 教程
菜鸟 HTML DOM 教程

关于本人

HaiYao的博客
Git主页

更新于：Oct 7, 2025

前端

DOM

评论