javascript常用dom操作整理
1.选取了dom操作中实用并常用的部分，省略了实用但有明显兼容性的部分
2.dom属性和方法的类型归属可能并不完全准确
3.某些一般兼...
javascript常用dom操作整理
1.选取了dom操作中实用并常用的部分，省略了实用但有明显兼容性的部分
2.dom属性和方法的类型归属可能并不完全准确
3.某些一般兼容性和特点做了标识(主要是ie8-9上下)
节点类型
|
节点类型 |
节点值 |
| 标签节点(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 |
最后一个子节点 |
document类型
|
属性 |
说明 |
| documentelement |
html标签 |
| head[兼容性不够] |
head标签 |
| 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() |
返回指定类名的元素集合 |
| queryselector() |
返回符合选择器的第一个元素 |
| queryselectorall() |
返回符合选择器的元素集合 |
| createelement() |
创建元素节点 |
| createtextnode() |
创建文本节点 |
| createattribute() |
创建属性节点 |
| createcomment() |
创建注释节点 |
| createdocumentfragment() |
创建空的 documentfragment 对象 |
| matchesselector()[兼容性不够，需要前缀] |
该选择器是否符合元素匹配 |
| write()[输出后光标不换行] |
文档文本写入 |
| writein()[输出后光标换行] |
文档文本写入 |
| implementation.hasfeature(特性,版本) |
特性监测 |
element类型
|
属性 |
说明 |
| id |
id |
| classname |
类名 |
| title |
标题 |
| style |
设置或返回元素的样式属性 |
| innerhtml |
设置或者返回元素的内容 |
| outerhtml[包含自身] |
设置或者返回元素的内容 |
| textcontent[ie-innertext] |
设置或返回文本内容 |
| contenteditable |
设置或返回元素的可编辑状态 |
| iscontenteditable |
是否可编辑 |
| childelementcount |
子元素节点个数 |
| firstelementchild |
第一个子元素节点 |
| lastelementchild |
最后一个子元素节点 |
| previouselementsibling |
上一个元素节点 |
| nextelementsibling |
下一个元素节点 |
|
方法 |
说明 |
返回 |
| focus() |
设置焦点 |
|
| blur() |
失去焦点 |
|
| appendchild(节点) |
在子节点列表之后插入 |
新增节点 |
| insertbefore(节点,参照节点) |
在参照节点之前插入节点 |
插入节点 |
| 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)[ie不支持] |
向cssrules集合中指定位置插入rule字符串 |
| addrule(rule,index)[ie支持] |
同上 |
| deleterule(index)[ie不支持] |
删除cssrules集合中指定位置的规则 |
| removerule(index)[ie支持] |
同上 |