• 周一. 8月 15th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

DOM 节点

admin

11月 28, 2021

DOM

DOM:(文档对象模型)是为了操作文档而定义的一组接口。是 W3C 的标准,即所有浏览器公共遵守的标准

DOM 是语言中立的 API,可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为12种不同的类型,每种类型分别表示文档中不同的信息及(或)标记。每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次,而所有的页面标记则表现为一个以特定节点为根节点的树形结构。

  可以使用 JavaScript 来操作这个节点树,进而改变底层文档的外观和结构。DOM操作往往是 JavaScript 程序中开销最大的部分,而因访问 NodeList 导致的问题为最多。NodeList 对象都是“动态的”,这就意味着每次访问 NodeList 对象,都会运行一次查询。有鉴于此,最好的办法就是尽量减少 DOM 操作

DOM 中最基本的节点类型是 Node,用于抽象地表示文档中一个独立的部分,所有其他类型都继承自 Node。DOM 的类型有:Node、Document、Element、Text、Comment、CDATASection、DocumentType、DocumentFragment、Attr

下面主要介绍,各种类型分别提供了哪些 API

1. DOM 节点

1.1 Node (节点)类型

  1. 每个节点都要 nodeType 属性,用于表明节点类型,节点类型有 Node 类型中定义的下列12个数值常量来表示,任何节点类型必居其一:
  Node.ELEMENT_NODE, //返回值: 1
  Node.ATTRIBUTE_NODE, // 2
  Node.TEXT_NODE, // 3
  Node.CDATA_SECTION_NODE, // 4
  Node.ENTITY_REFERENCE_NODE, // 5
  Node.ENTITY_NODE, // 6
  Node.PROCESSING_INSTRUCTION_NODE, // 7
  Node.COMMENT_NODE, // 8
  Node.DOCUMENT_NODE, // 9
  Node.DOCUMENT_TYPE_NODE, // 10
  Node.DOCUMENT_FRAGMENT_NODE, // 11
  Node.NOTATION_NODE, // 12

比如:console.log(document.nodeType, body.nodeType); // 9 1

  1. nodeName 和 nodeValue 属性
<body>
  <div id="app">xxx</div>
  <script>
    const app = document.querySelector("#app");
    console.log(
      app.childNodes[0].nodeValue, // xxx 
      app.nodeName, // DIV
    );
  </script>
</body>
  1. 节点关系
    每一个节点都有一个 childNodes 属性,其中保存着一个 NodeList (类数组)对象
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1); // 等同于[1]
var count = someNode.childNodes.length;

文档树中的父节点:parentNode
哥哥节点(同胞节点的上一个):previousSibling
弟弟节点:nextSibling
父节点的:firstChild 和 lastChild 分别指向子节点的第一个和最后一个
检查是否拥有子节点:hasChildNodes(); // 有 true ,没有 false

  1. 操作节点
    appendChild(newNode):向 childNodes 列表末尾添加一个节点,返回值为新增的节点
    insertBefore(newNode, 参照节点):向 childNodes 列表中的某个特定位置上插入节点,将新节点插入在参照节点之前,如果参照节点是 null ,则新节点插在最后。
    replaceChild(newNode, 要替换的节点)
    removeChild(要移除的节点·)

  2. 其它方法
    cloneNode():接收一个参数 true、false,代表深克隆和浅克隆,任何节点都可以使用,克隆之后的节点副本,需要手动插入到文档中
    normalize():处理文本节点,细节不展开说了。

1.2 Document (文档)类型

  JavaScript 通过 Document 类型表示文档。在浏览器中,document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面。 对象使我们可以对 HTML 页面中的所有元素进行访问。
  而且,document 对象是 window 对象的一个属性,因此可通过 window.document 属性对其进行访问,但通常省略 window。
  nodeType 的值为9,nodeName的值为 “#document”

  1. document 对象集合
集合 描述 说明
all[] 提供对文档中所有 HTML 元素访问的数组 已较少适用
anchors[] 对文档中所有 Anchor 对象引用的数组
forms[] 对文档中所有 Form 对象引用的数组
images[] 对文档中所有 Image 对象引用的数组
links[] 对文档中所有 Area 和 Link 对象引用的数组
  1. document 对象属性
属性 描述 说明
cookie 设置或得到与当前文档有关的所有 cookie
domain 得到当前文档的域名“““““
lastModified 得到文档被最后修改的日期和时间 不同浏览器结果可能不同
referrer 得到载入当前文档的 URL(前一个 URL 地址)
title 得到当前文档的标题
URL 得到当前文档的 URL
documentElement 该属性始终指向HTML中的元素
body 直接指向元素
doctype 获取<!DOCTYPE>
  1. document 对象方法
方法 描述
getElementById() 根据元素 id 得到元素(第一个)对象
getElementsByName() 根据元素 name 得到元素对象的集合
getElementsByTagName() 根据指定标签名得到元素对象的集合
open() 打开一个数据流,以收集来自任何 document.write() 或 document.writeln() 方法的输出
write() 向文档写 HTML 表达式 或 JavaScript 代码
writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符
close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据
createElement(“div”) 创建元素,参数是标签名,返回被创建的元素
createTextNode(“hello”) 参数是文本(特殊字符需转义),返回被创建的文本
createComment(“com”) 创建注释节点,插入的位置需是元素的后代
createCDataSection(“xx”) XML 中的注释节点
createDocumentFragment(Node) 创建 文档片段,该片段继承了所有 Node 的方法,它不会出现在 DOM 树中,可用它来减少浏览器的反复渲染,节约性能。
createAttribute() 创建一个 元素的特性 节点

1.3 Element 类型

  元素节点
  nodeType 的值为 1,parentNode 可能是 Document 或 Element,其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference

属性/方法 描述
element.accessKey 设置或返回元素的快捷键。
element.appendChild() 向元素添加新的子节点,作为最后一个子节点。
element.attributes 返回元素属性的 NamedNodeMap。
element.childNodes 返回元素子节点的 NodeList。
element.className 设置或返回元素的 class 属性。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比较两个元素的文档位置。
element.contentEditable 设置或返回元素的内容是否可编辑。
element.dir 设置或返回语言的方向。”ltr”从左至右,”rtl”从右至左
element.firstChild 返回元素的首个子。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.getFeature() 返回实现了指定特性的 API 的某个对象。
element.getUserData() 返回关联元素上键的对象。
element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false。
element.hasAttributes() 如果元素拥有属性,则返回 true,否则返回 false。
element.hasChildNodes() 如果元素拥有子节点,则返回 true,否则 false。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.insertBefore() 在指定的已有的子节点之前插入新节点。
element.isContentEditable 设置或返回元素的内容。
element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
element.isEqualNode() 检查两个元素是否相等。
element.isSameNode() 检查两个元素是否是相同的节点。
element.isSupported() 如果元素支持指定特性,则返回 true。
element.lang 设置或返回元素的语言代码。
element.lastChild 返回元素的最后一个子元素。
element.namespaceURI 返回元素的 namespace URI。
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。
element.normalize() 合并元素中相邻的文本节点,并移除空的文本节点。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.ownerDocument 返回元素的根元素(文档对象)。
element.parentNode 返回元素的父节点。
element.previousSibling 返回位于相同节点树层级的前一个元素。
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode() 移除指定的属性节点,并返回被移除的节点。
element.removeChild() 从元素中移除子节点。
element.replaceChild() 替换元素中的子节点。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
element.setAttribute() 把指定属性设置或更改为指定值。
element.setAttributeNode() 设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把对象关联到元素上的键。
element.style 设置或返回元素的 style 属性。
element.tabIndex 设置或返回元素的 tab 键控制次序。
element.tagName 返回元素的标签名。
element.textContent 设置或返回节点及其后代的文本内容。
element.title 设置或返回元素的 title 属性。
element.toString() 把元素转换为字符串。
nodelist.item() 返回 NodeList 中位于指定下标的节点。nodelist.item(0) === nodelist[0]
nodelist.length 返回 NodeList 中的节点数。

1.4 Text 类型

  文本节点由 Text 类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符,但不能包含HTML代码。
  nodeType 的值为 3,nodeName 的值为 “#text”,parentNode 是一个 Element,没有子节点。
  可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本,这两个属性中包含的值相同。对 nodeValue 的修改也会通过 data 反映出来,反之亦然。使用下列方法可以操作节点中的文本。

属性/方法 描述
nodeValue、data 设置或返回节点文本
length、nodeValue.lenght、data.length 节点中字符的数目
appendData(text) 将 text 添加到节点的末尾
deleteData(offset, count) 从 offset 指定的位置开始删除 count 个字符
insertData(offset, text) 在 offset 指定的位置插入 text
replaceData(offset, count, text) 用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本
splitText(offset) 从 offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count) 提取从 offset 指定的位置开始到 offset+count 为止处的字符串。

1.5 Comment 类型

  注释在 DOM 中是通过 Comment 类型来表示的。
  nodeType 的值为8,nodeName 的值为 “#comment”,parentNode 可能是 Document 或 Element,没有子节点。
  注释节点可以通过其父节点来访问,以下面的代码为例。

<div id="myDiv"><!-- A comment --></div>

在此,注释节点是

元素的一个子节点,因此可以通过下面的代码来访问它。

var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); // "A comment"

1.6 CDATASection 类型

  CDATASection 类型只针对基于 XML 的文档,表示的是 CDATA 区域。与 Comment 类似,CDATASection 类型继承自 Text 类型,因此拥有除 splitText() 之外的所有字符串操作方法。
  nodeType 为4,nodeName 为”#cdata-section”,nodeValue 是 CDATA 区域中的内容,parentNode可能是 Document 或 Element,没有子节点。
  CDATA 区域只会出现在 XML 文档中,因此多数浏览器都会把 CDATA 区域错误的解析为 Comment 或 Element。以下面的代码为例:

  这个例子中的

元素应该包含一个 CDATASection 节点。可是,四大主流浏览器无一能够这样解析它。即使对于有效的 XHTML 页面,浏览器也没有正确地支持嵌入的 CDATA 区域。
  在真正的 XML 文档中,可以使用 document.createCDataSection()来创建 CDATA 区域,只需为其传入节点的内容即可。

1.7 DocumentType 类型

  DocumentType 类型在 Web 浏览器中并不常用,仅有 Chrome 4.0、Firefox、Safari 和 Opera 支持它。DocumentType 包含着与文档 doctype 有关的所有信息(即<!DOCTYPE>标签中的信息)
  nodeType 为 10,nodeName 为 doctype 的名字,nodeValue 为 null,parentNode 是 Document,没有子节点。
  在 DOM1 级中,DocumentType 对象不能动态创建,而只能通过解析文档代码的方式创建。支持它的浏览器会把 DocumentType 对象保存在 document.doctype 中。DOM1 级描述了 DocumentType 对象的3个属性:

  1. name:表示文档类型的名称
  2. entitie:是由文档类型描述的实体的 NamedNodeMap 对象
  3. notations:是由文档描述的符号的 NamedNodeMap 对象
      通常,浏览器中的文档使用的都是 HTML 或 XHTML 文档类型,因而 entities 和 notations 都是空列表(列表中的项来自行内文档类型声明)。但不管怎样,只有 name 属性是有用的。这个属性中保存的是文档类型的名字,也就是出现在DocumentType 的 name 属性中保存的就是 "HTML"alert(document.doctype.name); // “HTML”`
      IE 及更早版本不支持 DocumentType,因此 document.doctype 的值始终都是等于 null。可是,这些浏览器会把文档类型声明错误地解释为注释,并且为它创建一个注释节点。IE9 会给 document.doctype 赋正确的对象,但任然不支持访问 DocumentType 类型

1.8 DocumentFragment 类型

  在所有节点类型中,只有 DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。
  nodeType 为11,nodeName 为”#document-fragment”,nodeValue 为 null,parentNode 为 null,子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference。
var fragment = document.createDocumentFragment();
  文档片段继承了 Node 的所有方法,通常用于执行那些针对文档的 DOM 操作。如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点,也不会从浏览器中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过 appendChild() 或 insertBefore() 将文档片段中的内容添加到文档中。在将文档片段作为参数传递给这两个方法时,实际上只会讲文档片段的所有子节点添加到相应的位置上;文档片段本身永远不会成为文档树的一部分。来看下面的 HTML 示例代码:<ul id="myList"></ul>
  假设我们想为这个<ul>元素添加3个列表项。如果逐个地添加列表项,将会导致浏览器反复渲染新信息。为避免这个问题,可以像下面这样使用一个文档片段来保存创建的列表项,然后再一次性将他们添加到文档中。

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i = 0; i < 3; i++) {
  li = document.createElement("li");
  li.appendChild(document.createTextNode("Item" + (i + 1)));
  fragment.appendChild(li);
};
ul.appendChild(fragment);

1.9 Attr 类型

  元素的特性在 DOM 中以 Attr 类型来表示。在所有浏览器中(包括 IE8),都可以访问 Attr 类型的构造函数和原型。从技术角度讲,特性就是存在于元素的 attribute 属性中的节点。
  nodeType 为2,nodeName 为特性的名称,nodeValue 为特性的值l,parentNode 为 null,在HTML 中没有子节点,在 XML 中子节点可以是 Text 或 EntityReference。
  尽管它们也是节点,但特性却不被认为是 DOM 文档树的一部分。开发人员最常用的是 getAttrbute()、setAttrbute() 和 removeAttrbute() 方法,很少直接引用特性节点,因为这些方法远比操作特性节点更方便
  Attr 对象有3个属性:

  1. name:特性名称(与 nodeName 的值相同)
  2. value:特性的值(与 nodeValue 的值相同)
  3. specified:是个布尔值,用以区别特性是在代码中指定的,还是默认的。
      使用 document.createAttribute() 并传入特性的名称可以创建新的特性节点。例如:要为元素添加 align 特性,可以使用下列代码:
var attr = document.createAttribute("align"); // 创建新特性节点,并未其 name 属性赋值 "align"
attr.value = "left";
element.setAttributeNode(attr);
alert(element.attributes['align'].value); // left
alert(element.getAttributeNode('align').value); // left
alert(element.getAttribute('align')); // left

2. DOM 事件

查看我的博客园链接
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。

提示: 在 W3C 2 级 DOM 事件中规范了事件模型。

2.1 鼠标事件

属性 描述 DOM级别
onclick 当用户点击某个对象时调用的事件句柄。 2
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。 2
onmousedown 鼠标按钮被按下。 2
onmouseenter 当鼠标指针移动到元素上时触发。 2
onmouseleave 当鼠标指针移出元素时触发 2
onmousemove 鼠标被移动。 2
onmouseover 鼠标移到某元素之上。 2
onmouseout 鼠标从某元素移开。 2
onmouseup 鼠标按键被松开。 2

2.2 键盘事件

属性 描述 DOM级别
onkeydown 某个键盘按键被按下。 2
onkeypress 某个键盘按键被按下并松开。 2
onkeyup 某个键盘按键被松开。 2

2.3 框架/对象(Frame/Object)事件

属性 描述 DOM级别
onabort 图像的加载被中断。( 2
onbeforeunload 该事件在即将离开页面(刷新或关闭)时触发 2
onerror 在加载文档或图像时发生错误。(
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
onload 一张页面或一幅图像完成加载。 2
onpageshow 该事件在用户访问页面时触发
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
onresize 窗口或框架被重新调整大小。 2
onscroll 当文档被滚动时发生的事件。 2
onunload 用户退出页面。 ( 和 ) 2

2.4 表单事件

属性 描述 DOM级别
onblur 元素失去焦点时触发 2
onchange 该事件在表单元素的内容改变时触发( , , , 和 2
onfocus 元素获取焦点时触发 2
onfocusin 元素即将获取焦点时触发 2
onfocusout 元素即将失去焦点时触发 2
oninput 元素获取用户输入时触发 3
onreset 表单重置时触发 2
onsearch 用户向搜索域输入文本时触发 ( <input=”search”>)
onselect 用户选取文本时触发 ( 和 2
onsubmit 表单提交时触发 2

2.5 剪贴板事件

属性 描述 DOM级别
oncopy 该事件在用户拷贝元素内容时触发
oncut 该事件在用户剪切元素内容时触发
onpaste 该事件在用户粘贴元素内容时触发

2.6 打印事件

属性 描述 DOM级别
onafterprint 该事件在页面已经开始打印,或者打印窗口已经关闭时触发
onbeforeprint 该事件在页面即将开始打印时触发

2.7 拖动事件

事件 描述 DOM级别
ondrag 该事件在元素正在拖动时触发
ondragend 该事件在用户完成元素的拖动时触发
ondragenter 该事件在拖动的元素进入放置目标时触发
ondragleave 该事件在拖动元素离开放置目标时触发
ondragover 该事件在拖动元素在放置目标上时触发
ondragstart 该事件在用户开始拖动元素时触发
ondrop 该事件在拖动元素放置在目标区域时触发

2.8 多媒体(Media)事件

事件 描述 DOM级别
onabort 事件在视频/音频(audio/video)终止加载时触发。
oncanplay 事件在用户可以开始播放视频/音频(audio/video)时触发。
oncanplaythrough 事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。
ondurationchange 事件在视频/音频(audio/video)的时长发生变化时触发。
onemptied 当期播放列表为空时触发
onended 事件在视频/音频(audio/video)播放结束时触发。
onerror 事件在视频/音频(audio/video)数据加载期间发生错误时触发。
onloadeddata 事件在浏览器加载视频/音频(audio/video)当前帧时触发触发。
onloadedmetadata 事件在指定视频/音频(audio/video)的元数据加载后触发。
onloadstart 事件在浏览器开始寻找指定视频/音频(audio/video)触发。
onpause 事件在视频/音频(audio/video)暂停时触发。
onplay 事件在视频/音频(audio/video)开始播放时触发。
onplaying 事件在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发。
onprogress 事件在浏览器下载指定的视频/音频(audio/video)时触发。
onratechange 事件在视频/音频(audio/video)的播放速度发送改变时触发。
onseeked 事件在用户重新定位视频/音频(audio/video)的播放位置后触发。
onseeking 事件在用户开始重新定位视频/音频(audio/video)时触发。
onstalled 事件在浏览器获取媒体数据,但媒体数据不可用时触发。
onsuspend 事件在浏览器读取媒体数据中止时触发。
ontimeupdate 事件在当前的播放位置发送改变时触发。
onvolumechange 事件在音量发生改变时触发。
onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。

2.9 动画事件

事件 描述 DOM级别
animationend 该事件在 CSS 动画结束播放时触发
animationiteration 该事件在 CSS 动画重复播放时触发
animationstart 该事件在 CSS 动画开始播放时触发

2.10 过渡事件

事件 描述 DOM
transitionend 该事件在 CSS 完成过渡后触发。

2.11 其他事件

事件 描述 DOM级别
onmessage 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
onmousewheel 已废弃。 使用 onwheel 事件替代
ononline 该事件在浏览器开始在线工作时触发。
onoffline 该事件在浏览器开始离线工作时触发。
onpopstate 该事件在窗口的浏览历史(history 对象)发生改变时触发。
onshow 该事件当 元素在上下文菜单显示时触发
onstorage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
ontoggle 该事件在用户打开或关闭
onwheel 该事件在鼠标滚轮在元素上下滚动时触发

2.12 事件对象

2.12.1 常量
静态变量 描述 DOM级别
CAPTURING-PHASE 当前事件阶段为捕获阶段(1) 1
AT-TARGET 当前事件是目标阶段,在评估目标事件(1) 2
BUBBLING-PHASE 当前的事件为冒泡阶段 (3) 3
2.12.2 属性
属性 描述 DOM级别
bubbles 返回布尔值,指示事件是否是起泡事件类型。 2
cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。 2
currentTarget 返回其事件监听器触发该事件的元素。 2
eventPhase 返回事件传播的当前阶段。 2
target 返回触发此事件的元素(事件的目标节点)。 2
timeStamp 返回事件生成的日期和时间。 2
type 返回当前 Event 对象表示的事件的名称。 2
2.12.3 方法
方法 描述 DOM级别
initEvent() 初始化新创建的 Event 对象的属性。 2
preventDefault() 通知浏览器不要执行与事件关联的默认动作。 2
stopPropagation() 不再派发事件。 2

2.13 目标事件对象

2.13.1 方法
方法 描述 DOM级别
addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent()) 2
dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent()) 2
removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) 2

2.14 事件监听对象

2.14.1 方法
方法 描述 DOM级别
handleEvent() 把任意对象注册为事件处理程序 2

2.15 文档事件对象

2.15.1 方法
方法 描述 DOM级别
createEvent() 2

2.16 鼠标/键盘事件对象

2.16.1 属性
属性 描述 DOM级别
altKey 返回当事件被触发时,”ALT” 是否被按下。 2
button 返回当事件被触发时,哪个鼠标按钮被点击。 2
clientX 返回当事件被触发时,鼠标指针的水平坐标。 2
clientY 返回当事件被触发时,鼠标指针的垂直坐标。 2
ctrlKey 返回当事件被触发时,”CTRL” 键是否被按下。 2
Location 返回按键在设备上的位置 3
charCode 返回onkeypress事件触发键值的字母代码。 2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
metaKey 返回当事件被触发时,”meta” 键是否被按下。 2
relatedTarget 返回与事件的目标节点相关的节点。 2
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。 2
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。 2
shiftKey 返回当事件被触发时,”SHIFT” 键是否被按下。 2
2.16.2 方法
方法 描述 DOM级别
initMouseEvent() 初始化鼠标事件对象的值 2
initKeyboardEvent() 初始化键盘事件对象的值 3

3. DOM 扩展

……

发表回复

您的电子邮箱地址不会被公开。