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 |
网友评论