DOM:API整理

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

推荐阅读更多精彩内容