当前位置:Gxlcms > JavaScript > js中常用DOM操作有哪些?

js中常用DOM操作有哪些?

时间:2021-07-01 10:21:17 帮助过:11人阅读

.选取了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类型

属性说明
documentElementhtml标签
head[兼容性不够]head标签
bodybody标签
URL当前页url
referrer来源页url
domain[可修改]页面域名
images所有图片集合
cookiecookie信息
title页面标题
activeElement当前焦点元素
documentMode文档模式
readyState文档状态
doctype文档类型声明
scripts脚本集合
formsform标签集合
children元素类型的子节点集合
defaultViewdocument关联的window对象
方法说明
getElementById()返回对应id的元素
getElementsByName()返回对应名称元素集合
getElementsByTagName()返回对应标签名元素集合
getElementsByClassName()返回指定类名的元素集合
querySelector()返回符合选择器的第一个元素
querySelectorAll()返回符合选择器的元素集合
createElement()创建元素节点
createTextNode()创建文本节点
createAttribute()创建属性节点
createComment()创建注释节点
createDocumentFragment()创建空的 DocumentFragment 对象
matchesSelector()[兼容性不够,需要前缀]该选择器是否符合元素匹配
write()[输出后光标不换行]文档文本写入
writeIn()[输出后光标换行]文档文本写入
implementation.hasFeature(特性,版本)特性监测

Element类型

属性说明
idid
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元素
属性方法说明
captioncaption元素指针
tBodiestbody集合
tFoottfoot集合
tHeadthead元素
rows表格所有行集合
createTHead()创建 <thead> 元素,将其放到表格中,返回引用
createTFoot()创建 <tfoot> 元素,将其放到表格中,返回引用
createCaption()创建caption元素,将其放到表格中,返回引用
deleteTHead()删除thead元素
deleteTFoot()删除tfoot元素
deleteCaption()删除caption元素
deleteRow(pos)删除指定位置的行
insertRow(pos)向行集合中的指定位置插入一行
tbody元素
属性方法说明
rowstbody所有行集合
deleteRow(pos)删除指定位置的行
insertRow(pos)向行集合中的指定位置插入一行,返回引用
tr元素
属性方法说明
cellstr所有单元格集合
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支持]同上
  • 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存在游览器差异


学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群

以上就是js中常用DOM操作有哪些?的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行