javascript domAPI整理
阅读原文时间:2023年07月16日阅读:3

一般兼容性和特点做了标识(主要是ie8+)

节点类型

节点值

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

属性

说明

nodeType

节点类型

nodeName

节点名

nodeValue

节点值

childNodes

子节点

parentNode

父节点

ownerDocument

文档节点

previousSibling

上一个节点

nextSibling

下一个节点

firstChild

第一个子节点

lastChild

最后一个子节点

方法

说明

remove()

获取属性值[ie不支持]

before()

在节点前插入[兼容性较差]

after()

在节点后插入[兼容性较差]

prepend()

在第一个子节点前插入[兼容性较差]

append()

在最后一个子节点后插入[兼容性较差]

属性

说明

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(特性,版本)

特性监测

属性

说明

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(特性,版本)

是否支持某特性

布尔值

属性

说明

name

属性名

value

属性值

isId

是否为id类型

specified

属性是否被指定

length

属性长度

attributes

属性集合

方法

说明

getAttribute()

获取属性值

getAttributeNode()

获取属性节点

setAttribute()

设置属性值

setAttributeNode()

设置属性节点

removeAttribute()

删除属性

removeAttributeNode()

删除属性节点[ie不支持]

hasAttribute()

是否存在指定的属性

hasAttributes()

是否存在属性

方法

说明

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)

向cssRules集合中指定位置插入rule字符串[ie不支持]

addRule(rule,index)

同上[ie支持]

deleteRule(index)

删除cssRules集合中指定位置的规则[ie不支持]

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