对一般兼容性和特点做了标识(主要是ie8+)
节点类型
| 节点类型 |
节点值 |
| 标签节点(Element) |
1 |
| 属性节点(Attr) |
2 |
| 文本节点(Text) |
3 |
| CDATA节点(CDATASetion) |
4 |
| 实体引用节点(EntityReference) |
5 |
| 实体节点(Entity) |
6 |
| 处理指令节点(ProcessingInstruction) |
7 |
| 注释节点(Comment) |
8 |
| 文档节点(Document) |
9 |
| 文档类型节点(DocumentType) |
10 |
| 文档片段节点(DocumentFragment) |
11 |
| DTD声明节点(Notation) |
12 |
Node类型
| 属性 |
说明 |
| nodeType |
节点类型 |
| nodeName |
节点名 |
| nodeValue |
节点值 |
| childNodes |
子节点 |
| parentNode |
父节点 |
| ownerDocument |
文档节点 |
| previousSibling |
上一个节点 |
| nextSibling |
下一个节点 |
| firstChild |
第一个子节点 |
| lastChild |
最后一个子节点 |
| 方法 |
说明 |
| remove() |
获取属性值[ie不支持] |
| before() |
在节点前插入[兼容性较差] |
| after() |
在节点后插入[兼容性较差] |
| prepend() |
在第一个子节点前插入[兼容性较差] |
| append() |
在最后一个子节点后插入[兼容性较差] |
Document类型
| 属性 |
说明 |
| documentElement |
html标签 |
| head |
head标签[ie9+] |
| body |
body标签 |
| URL |
当前页url |
| referrer |
来源页url |
| domain |
页面域名 |
| images |
所有图片集合 |
| cookie |
cookie信息 |
| title |
页面标题 |
| activeElement |
当前焦点元素 |
| documentMode |
文档模式 |
| readyState |
文档状态 |
| doctype |
文档类型声明 |
| scripts |
脚本集合 |
| forms |
form标签集合 |
| children |
元素类型的子节点集合 |
| defaultView |
document关联的window对象 |
| 方法 |
说明 |
| getElementById() |
返回对应id的元素 |
| getElementsByName() |
返回对应名称元素集合 |
| getElementsByTagName() |
返回对应标签名元素集合 |
| getElementsByClassName() |
返回指定类名的元素集合[ie不支持] |
| querySelector() |
返回符合选择器的第一个元素 |
| querySelectorAll() |
返回符合选择器的元素集合 |
| createElement() |
创建元素节点 |
| createTextNode() |
创建文本节点 |
| createAttribute() |
创建属性节点 |
| createComment() |
创建注释节点 |
| createDocumentFragment() |
创建空的 DocumentFragment 对象 |
| matchesSelector() |
该选择器是否符合元素匹配[实现不统一，需要前缀] |
| write() |
文档文本写入[输出后光标不换行] |
| writeIn() |
文档文本写入[输出后光标换行] |
| implementation.hasFeature(特性,版本) |
特性监测 |
Element类型
| 属性 |
说明 |
| id |
id |
| className |
类名 |
| classList.add('类名') |
添加指定类名[ie10+] |
| classList.remove('类名') |
删除指定类名[ie10+] |
| classList.contains('类名') |
是否包含指定类名[ie10+] |
| classList.toggle('类名') |
交替指定类名[ie10+] |
| title |
标题 |
| style |
设置或返回元素的样式属性 |
| children |
元素子集合 |
| innerHTML |
设置或者返回元素的内容 |
| outerHTML |
设置或者返回元素的内容[包含自身] |
| textContent |
设置或返回文本内容[ie不支持] |
| innerText |
设置或返回文本内容[ie支持] |
| contentEditable |
设置或返回元素的可编辑状态 |
| isContentEditable |
是否可编辑 |
| childElementCount |
子元素节点个数 |
| firstElementChild |
第一个子元素节点 |
| lastElementChild |
最后一个子元素节点 |
| previousElementSibling |
上一个元素节点 |
| nextElementSibling |
下一个元素节点 |
| 方法 |
说明 |
返回 |
| focus() |
设置焦点 |
|
| blur() |
失去焦点 |
|
| appendChild(节点) |
在子节点列表之后插入 |
新增节点 |
| insertBefore(节点,参照节点) |
在参照节点之前插入节点 |
插入节点 |
| insertAdjacentText(位置,节点内容) |
在指定位置插入文本 |
|
| insertAdjacentHTML(位置,节点内容) |
在指定位置插入html或文本 |
|
| removeChild(节点) |
节点删除 |
被删节点 |
| replaceChild(节点,被替换的节点) |
节点替换 |
被替换节点 |
| cloneNode(布尔值) |
复制节点 |
克隆节点 |
| importNode(节点,布尔值) |
从A文档中取得a节点，将其导入B文档(类似cloneNode方法) |
|
| contains(节点) |
该节点是否为调用节点的子级 |
布尔值 |
| hasFocus() |
是否获得了焦点 |
布尔值 |
| hasChildNodes() |
是否存在子节点 |
布尔值 |
| isDefaultNamespace(url) |
是否指定了名称空间 |
布尔值 |
| isEqualNode(节点) |
两个元素是否相等 |
布尔值 |
| isSupported(特性，版本) |
是否支持某特性 |
布尔值 |
Attr类型
| 属性 |
说明 |
| name |
属性名 |
| value |
属性值 |
| isId |
是否为id类型 |
| specified |
属性是否被指定 |
| length |
属性长度 |
| attributes |
属性集合 |
| 方法 |
说明 |
| getAttribute() |
获取属性值 |
| getAttributeNode() |
获取属性节点 |
| setAttribute() |
设置属性值 |
| setAttributeNode() |
设置属性节点 |
| removeAttribute() |
删除属性 |
| removeAttributeNode() |
删除属性节点[ie不支持] |
| hasAttribute() |
是否存在指定的属性 |
| hasAttributes() |
是否存在属性 |
Text类型
| 方法 |
说明 |
| appendData(文本) |
将text添加到节点的末尾 |
| deleteData(位置,数量) |
从指定位置开始删除n个字符 |
| insertData(位置,文本) |
从指定位置插入文本 |
| replaceData(位置,数量,文本) |
用text替换从offset位置开始到offset+count为止处的文本 |
| splitText(位置) |
从指定位置将当前文本节点分裂成两个文本节点 |
| substringData(位置,数量) |
截取从offset位置开始到offset+count为止处的字符串 |
| normalize() |
合并相邻文本节点，并删除空的文本节点 |
表格操作
table元素
元素，将其放到表格中，返回引用 元素，将其放到表格中，返回引用
| 属性方法 |
说明 |
| caption |
caption元素指针 |
| tBodies |
tbody集合 |
| tFoot |
tfoot集合 |
| tHead |
thead元素 |
| rows |
表格所有行集合 |
| createTHead() |
创建 |
| createTFoot() |
创建 |
| createCaption() |
创建caption元素，将其放到表格中，返回引用 |
| deleteTHead() |
删除thead元素 |
| deleteTFoot() |
删除tfoot元素 |
| deleteCaption() |
删除caption元素 |
| deleteRow(pos) |
删除指定位置的行 |
| insertRow(pos) |
向行集合中的指定位置插入一行 |
tbody元素
| 属性方法 |
说明 |
| rows |
tbody所有行集合 |
| deleteRow(pos) |
删除指定位置的行 |
| insertRow(pos) |
向行集合中的指定位置插入一行，返回引用 |
tr元素
| 属性方法 |
说明 |
| cells |
tr所有单元格集合 |
| deleteCell(pos) |
删除指定位置的单元格 |
| insertCell(pos) |
向单元格集合中的指定位置插入一个单元格，返回引用 |
样式操作
访问元素样式
- DOM样式——js通过dom.style只能访问直接样式属性，不能访问嵌入样式表和外部样式表
| 属性方法(dom.style) |
说明 |
| cssText |
返回style特性中所有样式的字符串形式 |
| length |
返回元素中CSS属性数量 |
| parentRule |
返回CSS信息的CSSRule对象 |
| getPropertyCSSValue(name) |
返回属性值的CSSValue对象(包含cssText和cssValueType) |
| getPropertyPriority(name) |
是否使用了!important属性 |
| getPropertyValue(name) |
返回给定属性的字符串值 |
| removeProperty(name) |
从样式中删除给定属性 |
| setProperty(name,value,优先级) |
将给定属性设置为相应的值并加上优先级 |
| 属性方法 |
说明 |
| document.defaultView.getComputedStyle(dom,伪元素字符串) |
返回当前元素所有计算后的样式[ie不支持] |
| dom.currentStyle |
返回当前元素所有计算后的样式[ie支持] |
操作样式表
- document.styleSheets——应用于文档的所有样式表
| 属性(document.styleSheet[n]) |
说明 |
| cssRules |
单个样式表中的所有样式规则[ie不支持] |
| rules |
同上[ie支持] |
| insertRule(rule,index) |
向cssRules集合中指定位置插入rule字符串[ie不支持] |
| addRule(rule,index) |
同上[ie支持] |
| deleteRule(index) |
删除cssRules集合中指定位置的规则[ie不支持] |
| removeRule(index) |
同上[ie支持] |
- document.styleSheets[n].cssRules/rules下
| 属性 |
说明 |
| cssText |
整条样式规则的字符串[ie不支持] |
| selectorText |
样式选择符 |
| style |
具体样式对象 |
大小和偏移
| 属性 |
说明 |
| offsetParent |
偏移的父容器 |
| getBoundingClientRect() |
获取页面元素实际位置和宽高(返回属性对象) |
| offsetWidth |
元素宽度(可视内容区+滚动条+内边距+边框) |
| offsetHeight |
元素高度(可视内容区+滚动条+内边距+边框) |
| offsetLeft |
与相邻父级的左距离 |
| offsetTop |
与相邻父级的上距离 |
| clientWidth |
元素宽度(可视内容区+内边距) |
| clientHeight |
元素高度(可视内容区+内边距) |
| clientLeft |
内边距边缘与边框边缘的距离__(左边框) |
| clientTop |
内边距边缘与边框边缘的距离__(上边框) |
| scrollWidth |
元素宽度(可视内容区+滚动内容区+内边距) |
| scrollHeight |
元素高度(可视内容区+滚动内容区+内边距) |
| scrollLeft |
元素左侧已滚动的距离 |
| scrollTop |
元素顶部已滚动的距离 |
兼容性
clientWidth/clientHeight和scrollWidth/scrollHeight存在游览器差异
