javascript 常用DOM操作整理

.选取了DOM操作中实用并常用的部分，省略了实用但有明显兼容性的部分
2.DOM属性和方法的类型归属可能并不完全准确
3.某些一般兼容性和特点做了标识(主要是ie8-9上下)

节点类型

节点类型节点值标签节点(Element)1属性节点(Attr)2文本节点(Text)3CDATA节点(CDATASetion)4实体引用节点(EntityReference)5实体节点(Entity)6处理指令节点(ProcessingInstruction)7注释节点(Comment)8文档节点(Document)9文档类型节点(DocumentType)10文档片段节点(DocumentFragment)11DTD声明节点(Notation)12

Node类型

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

Document类型

属性说明documentElementhtml标签head[兼容性不够]head标签bodybody标签URL当前页urlreferrer来源页urldomain[可修改]页面域名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类型

属性说明ididclassName类名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存在游览器差异

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！