前端开发者的必备知识宝库 —— 史上最全JavaScript domAPI整理（建议收藏）

Posted 2021-06-29 欧阳呀

前端开发者的必备知识宝库 —— javascript domAPI整理

• • 1. 节点类型
  • 2. Node类型
  • 3. Document类型
  • 4. Element类型
  • 5. attr类型
  • 6. Text类型
  • 7. 表格操作
  • 8. 样式操作
  • 9. 大小和偏移
  • 10. FAQ

• 对一般兼容性和特点做了标识（暖暖的，很贴心~）
• 包含新出的各类API（简直不要太爽）

1. 节点类型

节点类型	节点值
标签节点(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

2. Node类型

属性	说明
nodeType	节点类型
nodeName	节点名
nodeValue	节点值
childNodes	子节点
parentNode	父节点
ownerDocument	文档节点
previousSibling	上一个节点
nextSibling	下一个节点
firstChild	第一个子节点
lastChild	最后一个子节点

方法	说明
remove()	获取属性值 [ie不支持]
before()	在节点前插入 [兼容性较差]
after()	在节点前插入 [兼容性较差]
prepend()	在第一个子节点前插入 [兼容性较差]
append()	在最后一个子节点后插入 [兼容性较差]

3. 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(特性,版本)	特性监测

4. 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(特性，版本)	是否支持某特性	布尔值

5. attr类型

属性	说明
name	属性名
value	属性值
isId	是否为id类型
specified	属性是否被指定
length	属性长度
attributes	属性集合

方法	说明
getAttribute()	获取属性值
getAttributeNode()	获取属性节点
setAttribute()	设置属性值
setAttributeNode()	设置属性节点
removeAttribute()	删除属性
removeAttributeNode()	删除属性节点 [ie不支持]
hasAttribute()	是否存在指定的属性
hasAttributes()	是否存在属性

6. Text类型

方法	说明
appendData(文本)	将text添加到节点的末尾
deleteData(位置,数量)	从指定位置开始删除n个字符
insertData(位置,文本)	从指定位置插入文本
replaceData(位置,数量,文本)	用text替换从offset位置开始到offset+count为止处的文本
splitText(位置)	从指定位置将当前文本节点分裂成两个文本节点
substringData(位置,数量)	截取从offset位置开始到offset+count为止处的字符串
normalize()	合并相邻文本节点，并删除空的文本节点

撑住，快看完了

7. 表格操作

7.1 table

属性方法	说明
caption	caption元素指针
tBodies	tbody集合
tFoot	tfoot集合
tHead	thead元素
rows	表格所有行集合
createTHead()	创建
createTFoot()	创建
createCaption()	创建caption元素，将其放到表格中，返回引用
deleteTHead()	删除thead元素
deleteTFoot()	删除tfoot元素
deleteCaption()	删除caption元素
deleteRow(pos)	删除指定位置的行
insertRow(pos)	向行集合中的指定位置插入一行

7.2 tbody 元素

属性方法	说明
rows	tbody所有行集合
deleteRow(pos)	删除指定位置的行
insertRow(pos)	向行集合中的指定位置插入一行，返回引用

7.3 tr 元素

属性方法	说明
cells	tr所有单元格集合
deleteCell(pos)	删除指定位置的单元格
insertCell(pos)	向单元格集合中的指定位置插入一个单元格，返回引用

8. 样式操作

8.1 访问元素样式

• 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,优先级)	将给定属性设置为相应的值并加上优先级

8.2 操作样式表

• document.styleSheets —— 应用于文档的所有样式表

属性方法（dom.style）	说明
属性(document.styleSheet[n])
cssRules	单个样式表中的所有样式规则 [ie不支持]
rules	同上 [ie支持]
insertRule(rule,index)	向cssRules集合中指定位置插入rule字符串 [ie不支持]
addRule(rule,index)	同上 [ie支持]
deleteRule(index)	删除cssRules集合中指定位置的规则 [ie不支持]
removeRule(index)	同上 [ie支持]

9. 大小和偏移

属性	说明
offsetParent	偏移的父容器
getBoundingClientRect()	获取页面元素实际位置和宽高 (返回属性对象)
offsetWidth	元素宽度 (可视内容区+滚动条+内边距+边框)
offsetHeight	元素高度 (可视内容区+滚动条+内边距+边框)
offsetLeft	与相邻父级的左距离
offsetTop	与相邻父级的上距离
clientWidth	元素宽度 (可视内容区+内边距)
clientHeight	元素高度 (可视内容区+内边距)
clientLeft	内边距边缘与边框边缘的距离 (左边框)
clientTop	内边距边缘与边框边缘的距离 (上边框)
scrollWidth	元素宽度 (可视内容区+滚动内容区+内边距)
scrollHeight	元素高度 (可视内容区+滚动内容区+内边距)
scrollLeft	元素左侧已滚动的距离
scrollTop	元素顶部已滚动的距离

10. FAQ

本文内容较多，可能一下子记不住，可以收藏一波，方便日后查阅

1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位，一起加油！！！