DOM:API整理
2017-09-17 本文已影响45人
Viaphlyn
Node.
API | MEAN | Ps |
---|---|---|
Node.nodeName | 返回节点的名称 | |
Node.nodeType | 节点类型的常数值 | |
nodeValue | 返回一个字符串,表示当前节点本身的文本值 | 可读写 |
textContent | 返回当前节点和它的所有后代节点的文本内容 | 可读写 |
baseURI | 当前网页的绝对路径 | 只读,无值返回null |
ownerDocument | 返回当前节点所在的顶层文档对象 | document对象本身的ownerDocument属性,返回null |
nextSibling | 紧跟在当前节点后面的第一个同级节点 | 无,null |
previousSibling | 当前节点前面的、距离最近的一个同级节点 | 无,null |
parentNode | 父节点 | element、document和documentfragment节点。 |
childNodes | 返回一个NodeList集合 | 动态集合 |
firstChild | 第一个子节点 | 无,null |
lastChild | 最后一个子节点 | 无,null |
appendChild | 插入参数节点作为最后一个子节点 | 若已存在,移动到新位置 |
hasChildNodes | 当前节点是否有子节点 | 结合firstChild和nextSibling,可以遍历当前节点的所有后代节点。 |
cloneNode | 克隆一个节点 | 接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false |
removeChild | 移除子节点 | 并返回被移除的子节点 |
replaceChild | 替换当前节点的某一个子节点 | 返回被替换走的那个节点 |
contains | 返回一个布尔值,表示参数节点是否为当前节点的后代节点。 | |
compareDocumentPosition | 返回一个7个bit的二进制值,表示参数节点与当前节点的关系。 | 与contains方法完全一致 |
isEqualNode | 检查两个节点是否相等 | 类型、属性、子节点相同 |
normalize | 清理当前节点内部的所有Text节点 | 去除空文本节点,并且将毗邻的文本节点合并成一个 |
NodeList | 一个类似数组的对象 | 成员是节点对象 |
document节点
API | MEAN | Ps |
---|---|---|
document.doctype | 包含当前文档类型信息 | 对象 |
document.documentElemen | 返回当前文档的根节点 | 紧跟在document.doctype节点后面 |
defaultView | 返回document对象所在的window对象 | 否则返回null |
head | 返回当前文档的<head>节点 | 可写 |
body | 返回当前文档的<body> | 省略了<head>或<body>,浏览器会自动创造 |
activeElement | 返回当前文档中获得焦点的元素 | Tab键移动焦点,使用空格键激活焦点 |
links | 返回当前文档所有设定了href属性的a及area元素 | |
forms | 返回页面中所有表单元素form | |
images | 图片元素 | img标签 |
embeds | 嵌入对象 | embed标签 |
scripts | 所有脚本 | script标签 |
styleSheets | 返回一个类似数组的对象 | 代表当前网页的所有样式表 |
document.documentURI | 返回一个字符串,表示当前文档的网址 | 可用于所有文档(包括 XML 文档) |
document.URL | 同上 | 只能用于 HTML 文档 |
document.domain | 返回当前文档的域名 | |
lastModified | 返回当前文档最后修改的时间戳 | 格式为字符串 |
location | 返回location对象,提供了当前文档的URL信息 | location.assign()、location.reload()、location.toString() |
referrer | 返回一个字符串表示当前文档的访问来源 | 无,返回空字符串 |
title | 返回当前文档的标题 | 可写 |
characterSet | 返回渲染当前文档的字符集 | 如UTF-8、ISO-8859-1 |
readyState | 返回当前文档的状态 | loading、interactive、complete |
designMode | 控制当前文档是否可编辑 | |
implementation | 返回一个对象来甄别当前环境部署了哪些DOM相关接口 | 其hasFeature方法,可以判断当前环境是否部署了特定版本的特定接口。 |
compatMode | 返回浏览器处理文档的模式 | 可为BackCompat(向后兼容模式)和CSS1Compat(严格模式) |
cookie | 操作浏览器Cookie | |
open | 新建一个文档,供write写入内容 | 相当清除当前文档,重新写入内容。 |
close | 关闭open方法所新建的文档 | write无法写入内容 |
document.write | 向当前文档写入内容 | 尽量避免使用 |
writeln | 同上 | 会在输出内容的尾部添加换行符 |
querySelector | CSS选择器作为参数返回匹配该选择器的元素节点 | 多个匹配返回第一个,无null |
getElementsByTagName | 返回所有指定HTML标签的元素 | 无null |
getElementsByClassName | 返回一个类似数组,包括了所有class名字符合指定条件的元素的对象 | |
getElementsByName | 选择拥有name属性的HTML元素 | 返回一个类似数组的的对象 |
getElementById | 返回匹配指定id属性的元素节点 | 无,null |
elementFromPoint | 返回位于页面指定位置最上层的Element子节点 | |
createElement | 生成网页元素节点 | |
createTextNode | 生成文本节点 | |
createAttribute | 生成一个新的属性对象节点,并返回它 | |
createDocumentFragment | 生成一个DocumentFragment对象 | |
createEvent | 生成一个事件对象 | 该对象可以被element.dispatchEvent使用,触发指定事件 |
addEventListener | 添加事件监听函数 | |
removeEventListener | 移除事件监听函数 | |
dispatchEvent | 触发事件 | |
hasFocus | 返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点 | |
createNodeIterator | 返回一个DOM的子节点遍历器 | |
createTreeWalker | 返回一个DOM的子树遍历器 | 与createNodeIterator只遍历子节点,而它遍历整个子树 |
adoptNode | 将某节点从其原来所在的文档移除,新节点插入当前文档,并返回插入后的新节点 | |
importNode | 从外部文档拷贝指定节点,插入当前文档 | |
getSelection | 指向window.getSelection |
Element对象
API | MEAN | Ps |
---|---|---|
Element.attributes | 返回一个类似数组的成员是当前元素节点的所有属性节点的对象 | |
id | 返回指定元素的id属性 | 可读写 |
tagName | 返回指定元素的大写标签名 | 与nodeName属性的值相等 |
innerHTML | 返回该元素包含的 HTML 代码 | 可读写,常用来设置某个节点的内容 |
outerHTML | 返回一个字符串内容为指定元素节点的所有HTML代码,包括它自身和包含的所有子元素 | 可读写,赋值相当于替换掉当前元素。 |
className | 用来读写当前元素节点的class | 值是一个字符串,每个class之间用空格分割 |
classList | 返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。 | |
classList | 指向一个类似数组的对象,其length属性(只读)返回当前元素的class数量 | add、remove、contain、stoggle、item、toString |
clientHeight | 返回元素节点可见部分的高度 | |
clientWidth | 返回元素节点可见部分的宽度 | |
clientLeft | 元素节点左边框(left border)的宽度 | |
clientTop | 网页元素顶部边框的宽度,单位为像素 | |
scrollHeight | 返回某个网页元素的总高度 | 只读 |
scrollWidth | 总宽度 | 元素在垂直和水平两个方向上可以滚动的距离 |
scrollLef | 示网页元素的水平滚动条向右侧滚动的像素数量 | |
scrollTop | 网页元素的垂直滚动条向下滚动的像素数量 | 对于那些没有滚动条的网页元素,这两个属性总是等于0 |
offsetHeight | 返回元素的垂直高度 | 元素左下角距离左上角的位移,单位为像素,只读 |
offsetWidth | 返回水平宽度 | 右上角--左上角 |
offsetLeft | 当前元素左上角相对于Element.offsetParent节点的水平位移 | |
offsetTop | 返回垂直位移 | 指相对于父节点的位移 |
style | 读写该元素的行内样式信息 | |
children | 返回一个HTMLCollection对象,包括当前元素节点的所有子元素 | 它是一个类似数组的动态对象 |
childElementCount | 返回当前元素节点包含的子HTML元素节点的个数,与Element.children.length的值相同。 | 该属性只计算HTML元素类型的子节点 |
firstElementChild | 返回第一个HTML元素类型的子节点 | |
lastElementChild | 最后一个HTML元素类型的子节点 | |
nextElementSibling | 返回当前HTML元素节点的后一个同级HTML元素节点 | 无null |
previousElementSibling | 返回当前HTML元素节点的前一个同级HTML元素节点 | 无,null |
offsetParent | 返回当前 HTML 元素的最靠近的、并且 CSS 的position属性不等于static的上层元素 | |
getAttribute | 读取指定属性 | |
setAttribute | 设置指定属性 | |
hasAttribute | 返回一个布尔值,表示当前元素节点是否有指定的属性 | |
removeAttribute | 移除指定属性 | |
querySelector | 接受CSS选择器作为参数,返回父元素的第一个匹配的子元素 | |
querySelectorAll | 接受CSS选择器作为参数,返回一个NodeList对象,包含所有匹配的子元素 | |
Element.getElementsByClassName | 返回一个HTMLCollection对象,成员是当前元素节点的所有匹配指定class的子元素 | 与document方法的用法类似,只是搜索范围不是整个文档,而是当前元素节点 |
getElementsByTagName | 标签名 | 同上 |
closest | 返回当前元素节点的最接近的父元素(或本身),条件是必须匹配给定的CSS选择器 | 不满足匹配,则返回null |
match | 返回一个布尔值,表示当前元素是否匹配给定的CSS选择器 | |
addEventListener | 添加事件的回调函数 | |
removeEventListener | 移除事件监听函数 | |
dispatchEvent | 触发事件 | |
scrollIntoView | 滚动当前元素,进入浏览器的可见区域 | |
getBoundingClientRec | t返回一个对象,提供当前元素节点的CSS盒状模型提供的所有信息 | x、left、right、width、y、top、bottom、height |
getClientRects | 返回一个类似数组的对象,里面是当前元素在页面上形成的所有矩形 | 每个矩形都有bottom、height、left、right、top和width六个属性 |
insertAdjacentHTML | 解析HTML字符串,然后将生成的节点插入DOM树的指定位置 | beforebegin、afterbegin、beforeend、afterend |
remove | 将当前元素节点从DOM树删除 | |
focus | 用于将当前页面的焦点,转移到指定元素上 |
属性的操作
API | MEAN | Ps |
---|---|---|
Element.getAttribute | 返回当前元素节点的指定属性 | 无,则null |
Element.setAttribute | 用于为当前元素节点新增属性 | 若同名属性已存在,则相当于编辑已存在的属性 |
Element.hasAttribute | 返回一个布尔值,表示当前元素节点是否包含指定属性 | |
Element.removeAttribute | 从当前元素节点移除属性 |
Text节点和DocumentFragment节点
API | MEAN | Ps | |
---|---|---|---|
document.createTextNode | 创造一个Text节点 | ||
data | 用来设置或读取Text节点的内容 | 等同于nodeValue属性 | |
wholeText | 将当前Text节点与毗邻的Text节点,作为一个整体返回 | ||
length | 返回当前Text节点的文本长度 | ||
nextElementSibling | 返回紧跟在当前Text节点后面的那个同级Element节点 | 若无,null | |
previousElementSibling | 返回当前Text节点前面最近的那个Element节点 | 无,null | |
appendData | 在Text节点尾部追加字符串 | ||
deleteData | 删除Text节点内部的子字符串 | 第一个参数为子字符串位置,第二个为子字符串长度 | |
insertData | 在Text节点插入字符串 | 第一个参数为插入位置,第二个为插入的子字符串 | |
replaceData | 用于替换文本 | 第一个参数为替换开始位置,第二个为需要被替换掉的长度,第三个为新加入的字符串 | |
subStringData | 获取子字符串 | 第一个参数为子字符串在Text节点中的开始位置,第二个为子字符串长度 | |
remove | 移除当前Text节点 | ||
splitTextText | 节点一分为二,变成两个毗邻的Text节点 | 参数是分割位置(从零开始),分割到该位置的字符前结束。若不存在,将报错 | |
normalize | 将毗邻的两个Text节点合并 | ||
DocumentFragment | 代表一个文档的片段,本身就是一个完整的DOM树形结构 | 比node多childrenfirst、ElementChild、lastElementChild、childElementCount四个属性 | |
document.createDocumentFragment | 创建一个空的DocumentFragment节点 | 再使用其他DOM方法,向其添加子节点 |
事件模型
API | MEAN | Ps |
---|---|---|
EventTarget接口 | ||
addEventListener | 在当前节点或对象上,定义一个特定事件的监听函数 | 绑定事件的监听函数,三个参数type、listener、useCapture |
removeEventListener | 移除addEventListener方法添加的事件监听函数 | 移除事件的监听函数 |
dispatchEvent | 在当前节点上触发指定事件 | 触发事件 |
Event对象 | 第一个参数是字符串,表示事件的名称;第二个参数是一个对象,表示事件对象的配置 | 两个属性:bubbles、cancelable |
event.bubbles | 返回一个布尔值,表示当前事件是否会冒泡 | 只读,只能在新建事件时改变 |
event.eventPhase | 返回一个整数值,表示事件目前所处的节点 | 0没有发生、1捕获、2到达目标节点、3冒泡 |
event.cancelable | 返回一个布尔值,表示事件是否可以取消 | 只读 |
event.defaultPrevented | 返回一个布尔值,表示该事件是否调用过preventDefault方法 | |
event.currentTarget | 返回事件当前所在的节点 | 正在执行的监听函数所绑定的那个节点 |
event.target | 返回触发事件的那个节点 | 事件最初发生的节点 |
event.type | 返回一个字符串,表示事件类型 | 大小写敏感 |
event.detail | 返回一个数值,表示事件的某种信息 | |
event.timeStamp | 返回一个毫秒时间戳,表示事件发生的时间 | |
event.isTrusted | 返回一个布尔值,表示该事件是否为真实用户触发 | |
event.preventDefault | 取消浏览器对当前事件的默认行为 | 生效的前提是,事件的cancelable属性为true |
event.stopPropagation | 阻止事件在DOM中继续传播,防止再触发定义在别的节点上的监听函数 | 不包括在当前节点上新定义的事件监听函数 |
event.stopImmediatePropagation | 阻止同一个事件的其他监听函数被调用 |
事件种类
API | MEAN | Ps |
---|---|---|
鼠标事件 | ||
click | 单击鼠标时触发 | |
dblclick | 当用户在element、document、window对象上,双击鼠标时触发 | 会在mousedown、mouseup、click之后触发。 |
mouseup | 在释放按下的鼠标键时触发 | |
mousedown | 在按下鼠标键时触发。 | |
mousemove | 当鼠标在一个节点内部移动时触发 | 当鼠标持续移动时,该事件会连续触发 |
mouseover | 鼠标进入一个节点时触发 | 只要鼠标在节点内部移动,会在子节点上触发多次。 |
mouseenter | 鼠标进入一个节点时触发 | 只触发一次 |
mouseout | 鼠标离开一个节点时触发 | 事件会冒泡到父节点,进而触发父节点的mouseout事件 |
mouseleave | 鼠标离开一个节点时触发 | |
contextmenu | 在一个节点上点击鼠标右键时触发,或者按下“上下文菜单”键时触发 | |
MouseEvent 对象 | ||
altKey | Alt 键 | |
ctrlKey | Ctrl 键 | |
metaKey | Meta 键 | |
shiftKey | Shift 键 | |
button | 返回一个数值,表示按下了鼠标哪个键 | -1:没有按下键。 0:按下主键。1:按下辅助键。2:按下次键 |
buttons | 返回一个3个比特位的值,表示同时按下了哪些键 | 用来处理同时按下多个鼠标键 |
clientX | 返回鼠标位置相对于浏览器窗口左上角的水平坐标 | 单位为像素,与页面是否横向滚动无关 |
clientY | 垂直坐标 | |
movementX | 返回一个水平位移,表示当前位置与上一个mousemove事件之间的水平距离 | 单位为像素 |
movementY | 垂直位移 | |
screenX | 返回鼠标位置相对于屏幕左上角的水平坐标 | 单位为像素 |
screenY | 垂直坐标 | |
relatedTarget | 返回事件的次要相关节点 | 无则null |
wheel | 与鼠标滚轮相关的事件,只有一个,用户滚动鼠标的滚轮,就触发这个事件 | 属性deltaX、deltaY、deltaZ、deltaMode |
键盘 | 用来描述键盘行为 | keydown、keypress、keyup |
进度事件 | ||
abort | 当进度事件被中止时触发。 | 如果发生错误,导致进程中止,不会触发该事件。 |
error | 由于错误导致资源无法加载时触发。 | |
load | 进度成功结束时触发。 | |
loadstart | 进度开始时触发。 | |
loadend | 进度停止时触发,发生顺序排在error事件\abort事件\load事件后面。 | |
progress | 当操作处于进度之中,由传输的数据块不断触发。 | |
timeout | 进度超过限时触发。 | |
拖拉事件 | ||
drag | 拖拉过程中,在被拖拉的节点上持续触发 | |
dragstart | 拖拉开始时在被拖拉的节点上触发 | 该事件的target属性是被拖拉的节点 |
dragend | 拖拉结束时(释放鼠标键或按下escape键)在被拖拉的节点上触发 | 该事件的target属性是被拖拉的节点 |
dragenter | 拖拉进入当前节点时,在当前节点上触发 | 该事件的target属性是当前节点 |
dragover | 拖拉到当前节点上方时,在当前节点上持续触发 | 该事件的target属性是当前节点 |
dragleave | 拖拉离开当前节点范围时,在当前节点上触发 | 当前节点 |
drop | 被拖拉的节点或选中的文本,释放到目标节点时,在目标节点上触发。 | |
DataTransfer对象 | ||
dropEffect | 设置放下(drop)被拖拉节点时的效果 | 可能的值包括copy、move、link、none |
effectAllowed | 设置本次拖拉中允许的效果 | 可能的值包括copy、move、link、copyLink、copyMove、linkMove、all、none、uninitialized(默认值,等同于all) |
files | 是一个FileList对象,包含一组本地文件,可以用来在拖拉操作中传送 | 如果本次拖拉不涉及文件,则属性为空的FileList对象。 |
types | 属性是一个数组,保存每一次拖拉的数据格式 | |
setData | 设置事件所带有的指定类型的数据 | 第一个参数是数据类型,第二个是具体数据 |
getData | 接受一个字符串(表示数据类型)作为参数 | 返回事件所带的指定类型的数据(通常是用setData方法添加的数据) |
clearData | 接受一个字符串(表示数据类型)作为参数,删除事件所带的指定类型的数据 | 如果没有指定类型,则删除所有数据 |
setDragImage | 用来自定义这张图片跟随鼠标一起移动 | |
touch对象 | ||
touchstart | 用户接触触摸屏时触发 | 它的target属性返回发生触摸的Element节点 |
touchend | 用户不再接触触摸屏时(或者移出屏幕边缘时)触发 | 其target属性与touchstart事件是一致的,它的changedTouches属性返回一个TouchList对象,包含所有不再触摸的触摸点(Touch对象)。 |
touchmove | 用户移动触摸点时触发 | 它的target属性与touchstart事件的target属性一致。如果触摸的半径、角度、力度发生变化,也会触发该事件。 |
touchcancel | 触摸点取消时触发 | |
表单事件 | ||
Input | 当<input>、<textarea>的值发生变化时触发 | 打开contenteditable属性的元素,只要值发生变化,也会触发input事件。 |
select | 当在<input>、<textarea>中选中文本时触发 | |
change | 当<input>、<select>、<textarea>的值发生变化时触发。 | |
reset | 当表单重置(所有表单成员变回默认值)时触发 | |
submit | 当表单数据向服务器提交时触发 | |
文档事件 | ||
beforeunload | 在窗口将要关闭,或者网页(即document对象)将要卸载时触发。 | 它可以用来防止用户不小心关闭网页 |
unload | 在窗口关闭或者document对象将要卸载时触发,发生在window、body、frameset等对象上面。 | 在页面没有被浏览器缓存时才会触发,如果通过按下“前进/后退”导致页面加载,并不会触发unload事件 |
load | 在页面加载成功时触发 | 页面从浏览器缓存加载,并不会触发load事件 |
error | 在页面加载失败时触发 | |
pageshow | 在页面加载时触发 | 包括第一次加载和从缓存加载两种情况 |
pagehide | 当用户通过“前进/后退”按钮,离开当前页面时触发 | |
DOMContentLoaded事件 | 当HTML文档下载并解析完成以后,就会在document对象上触发DOMContentLoaded事件 | |
readystatechange | 发生在Document对象和XMLHttpRequest对象,当它们的readyState属性发生变化时触发 | |
scroll | 在文档或文档元素滚动时触发,主要出现在用户拖动滚动条 | |
resize | 在改变浏览器窗口大小时触发 | 发生在window、body、frameset对象上 |
hashchange | 在URL的hash部分(即#号后面的部分,包括#号)发生变化时触发 | |
popstate | 在浏览器的history对象的当前记录发生显式切换时触发 | |
cut | 在将选中的内容从文档中移除,加入剪贴板后触发 | |
copy | 在选中的内容加入剪贴板后触发 | |
paste | 在剪贴板内容被粘贴到文档后触发 | |
焦点事件 | ||
focus | Element节点获得焦点后触发 | 该事件不会冒泡 |
blur | Element节点失去焦点后触发 | 该事件不会冒泡 |
focusin | Element节点将要获得焦点时触发,发生在focus事件之前 | 该事件会冒泡。Firefox不支持该事件。 |
focusout | Element节点将要失去焦点时触发,发生在blur事件之前 | 该事件会冒泡。Firefox不支持该事件。 |
CSS操作
API | MEAN | Ps |
---|---|---|
setProperty(propertyName,value) | 设置某个CSS属性 | |
getPropertyValue(propertyName) | 读取某个CSS属性 | |
removeProperty(propertyName) | 删除某个CSS属性 | |
window.getComputedStyle | 样式规则返回 | 接受一个DOM节点对象作为参数,返回一个包含该节点最终样式信息的对象 |
StyleSheet对象 | 返回当前页面的所有StyleSheet对象(即所有样式表) | 属性:media、disabled、href、title、type、parentStyleSheet、ownerNode。cssRules |
insertRule() | 在当前样式表的cssRules对象插入CSS规则 | |
deleteRule() | 删除cssRules对象的CSS规则 | |
CSSRule接口 | ||
cssText | 返回当前规则的文本 | |
parentStyleSheet | 返回定义当前规则的样式表对象 | |
parentRule | 返回包含当前规则的那条CSS规则 | |
CSSStyleRule接口 | ||
selectorText | 返回当前规则的选择器 | |
style | 返回一个对象,代表当前规则的样式声明 | 部署了CSSStyleDeclaration接口,使用它的cssText属性,可以返回所有样式声明,格式为字符串。 |
CSSStyleDeclaration对象 | ||
getPropertyPriority | 返回指定声明的优先级,如果有的话,就是“important”,否则就是空字符串 | |
getPropertyValue | 返回指定声明的值。 | |
item | 返回指定位置的属性名 | |
removeProperty | 用于删除一条CSS属性 | 返回被删除的值。 |
setProperty | 用于设置指定的CSS属性 | 没有返回值。 |
window.matchMedia | 用来检查CSS的mediaQuery语句 | |
CSS事件 | ||
transitionEnd事件 | CSS的过渡效果结束后,触发transitionEnd事件 | 属性:propertyName、elapsedTime、pseudoElement |
animationstart事件 | 动画开始时触发 | |
animationend事件 | 动画结束时触发 | |
animationiteration事件 | 开始新一轮动画循环时触发 | 如果animation-iteration-count=1(只播放一轮的CSS动画),该事件不触发 |
MutationObserver
API | MEAN | Ps |
---|---|---|
实例方法 | ||
observe(要观察的 DOM 节点,配置对象) | 开始监听 | 属性:attributeOldValue、characterDataOldValue、attributeFilter |
disconnect | 停止观察 | 调用该方法后,DOM 再发生变动,也不会触发观察器 |
takeRecords | 清除变动记录,即不再处理未处理的变动 | 返回变动记录的数组 |
MutationRecord 对象 | 包含了与变动相关的所有信息 | 属性:type、target、addedNodes、removedNodes、previousSibling、nextSibling、attributeName、oldValue、childList |