javascript 常用DOM操作整理

Posted 2020-08-14

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()	创建 <thead> 元素，将其放到表格中，返回引用
createTFoot()	创建 <tfoot> 元素，将其放到表格中，返回引用
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支持]	单个样式表中的所有样式规则

• 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存在游览器差异

文／戡玉（简书作者）
原文链接：http://www.jianshu.com/p/e1391dc17361
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。