DOM快速参考
撰写时间：2023-04-26
修订时间：2023-05-22
DOM简介
DOM是用于访问及维护HTML文档或XML文档的API，是Web开发人员必须了解及掌握的部分。
Node接口: EventTarget
属性
Node类型
| 类型 | 名称 | 值 |
|---|---|---|
| const unsigned short | ELEMENT_NODE | 1 |
| const unsigned short | ATTRIBUTE_NODE | 2 |
| const unsigned short | TEXT_NODE | 3 |
| const unsigned short | CDATA_SECTION_NODE | 4 |
| const unsigned short | ENITITY_REFERENCE_NODE | 5 |
| const unsigned short | ENTITY_NODE | 6 |
| const unsigned short | PROCESSING_INSTRUCTION_NODE | 7 |
| const unsigned short | COMMENT_NODE | 8 |
| const unsigned short | DOCUMENT_NODE | 9 |
| const unsigned short | DOCUMENT_TYPE_NODE | 10 |
| const unsigned short | DOCUMENT_FRAGMENT_NODE | 11 |
| const unsigned short | NOTATION_NODE | 12 |
文档位置
| 类型 | 名称 | 值 |
|---|---|---|
| const unsigned short | DOCUMENT_POSITION_DISCONNECTED | 0x01 |
| const unsigned short | DOCUMENT_POSITION_PRECEDING | 0x02 |
| const unsigned short | DOCUMENT_POSITION_FOLLOWING | 0x04 |
| const unsigned short | DOCUMENT_POSITION_CONTAINS | 0x08 |
| const unsigned short | DOCUMENT_POSITION_CONTAINS_BY | 0x10 |
| const unsigned short | DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC | 0x20 |
只读属性
| 类型 | 名称 |
|---|---|
| unsigned short | nodeType |
| DOMString | nodeName |
| USVString | baseURI |
| boolean | isConnected |
| Document? | ownerDocument |
| Node? | parentNode |
| Element? | parentElement |
| NodeList | childNodes |
| Node? | firstChild |
| Node? | lastChild |
| Node? | previousSibling |
| Node? | nextSibling |
可修改属性
| 类型 | 名称 |
|---|---|
| DOMString? | nodeValue |
| DOMString? | textContent |
字典属性
| 类型 | 名称 | 选项 | ||
|---|---|---|---|---|
| dictionary | GetRootNodeOptions | { | boolean composed = false; | } |
Node方法
| 返回类型 | 名称 | 参数 | ||
|---|---|---|---|---|
| Node | getRootNode | ( | optional GetRootNodeOptions options = {} | ) |
| boolean | hasChildNodes | ( | ) | |
| undefined | normalize | ( | ) | |
| Node | cloneNode | ( | optional boolean deep = false | ) |
| boolean | isEqualNode | ( | Node? otherNode | ) |
| boolean | isSameNode | ( | Node? otherNode | ) |
| unsigned short | compareDocumentPosition | ( | Node other | ) |
| boolean | contains | ( | Node? other | ) |
| DOMString? | lookupPrefix | ( | DOMString? namespace | ) |
| DOMString? | lookupNamespaceURI | ( | DOMString? prefx | ) |
| boolean | isDefaultNamespace | ( | DOMString? namespace | ) |
| Node | insertBefore | ( | Node node, | ) |
| Node? child | ||||
| Node | appendChild | ( | Node node | ) |
| Node | replaceChild | ( | Node node, | ) |
| Node child | ||||
| Node | removeChild | ( | Node child | ) |
mixin NonElementParentNode接口
方法
| 返回类型 | 名称 | 参数 | ||
|---|---|---|---|---|
| Element? | getElementById | ( | DOMString elementId | ) |
Document及DocumentFragment都包含NonElementParentNode。
mixin ParentNode接口
如果一个Node有子节点，则它是ParentNode，则有以下的属性及方法。
只读属性
| 类型 | 名称 |
|---|---|
| HTMLCollection | children |
| Element? | firstElementChild |
| Element? | lastElementChild |
| unsigned long | childElementCount |
方法
| 返回类型 | 名称 | 参数 | ||
|---|---|---|---|---|
| undefined | prepend | ( | (Node or DOMString)... nodes | ) |
| undefined | append | ( | (Node or DOMString)... nodes | ) |
| undefined | replaceChildren | ( | (Node or DOMString)... nodes | ) |
| Element? | querySelector | ( | DOMString selectors | ) |
| NodeList | querySelectorAll | ( | DOMString selectors | ) |
Document, DocumentFragment及Element都包含ParentNode。
mixin NonDocumentTypeChildNode接口
如果一个Node有兄弟节点，则它是NonDocumentTypeChildNode，则有以下的属性。
只读属性
| 类型 | 名称 |
|---|---|
| Element? | previousElementSibling |
| Element? | nextElementSibling |
Element, CharacterData及Element都包含NonDocumentTypeChildNode。
mixin ChildNode
如果一个Node有父节点，则它是ChildNode，则有以下的方法。
方法
| 返回类型 | 名称 | 参数 | ||
|---|---|---|---|---|
| undefined | before | ( | (Node or DOMString)... nodes | ) |
| undefined | after | ( | (Node or DOMString)... nodes | ) |
| undefined | replaceWith | ( | (Node or DOMString)... nodes | ) |
| undefined | remove | ( | ) |
DocumentType, Element及CharacterData都包含ChildNode。
Element接口: Node
属性
只读属性
| 类型 | 名称 |
|---|---|
| DOMString? | namespaceURI |
| DOMString? | prefix |
| DOMString | localName |
| DOMString | tagName |
| DOMTokenList | classList |
| NamedNodeMap | attributes |
| ShadowRoot? | shadowRoot |
可修改属性
| 类型 | 名称 |
|---|---|
| DOMString | id |
| DOMString | className |
| DOMString | slot |
字典属性
| 类型 | 名称 | 选项 | ||
|---|---|---|---|---|
| dictionary | ShadowRootInit | { | required ShadowRootMode mode; | } |
| boolean delegatesFocus = false, | ||||
| SlotAssignmentMode slotAssignment = "named" |
方法
| 返回类型 | 名称 | 参数 | ||
|---|---|---|---|---|
| boolean | hasAttributes | ( | ) | |
| sequence<DOMString> | getAttributeNames | ( | ) | |
| DOMString? | getAttribute | ( | DOMString qualifiedName | ) |
| DOMString? | getAttributeNS | ( | DOMString? namespace, | ) |
| DOMString localName | ||||
| undefined | setAttribute | ( | DOMString qualifiedName, | ) |
| DOMString value | ||||
| undefined | setAttributeNS | ( | DOMString? namespace, | ) |
| DOMString qualifiedName, | ||||
| DOMString value | ||||
| undefined | removeAttribute | ( | DOMString qualifiedName | ) |
| undefined | removeAttributeNS | ( | DOMString? namespace, | ) |
| DOMString localName | ||||
| boolean | toggleAttribute | ( | DOMString qualifiedName, | ) |
| optional boolean force | ||||
| boolean | hasAttribute | ( | DOMString qualifiedName | ) |
| boolean | hasAttributeNS | ( | DOMString? namespace, | ) |
| DOMString localname | ||||
| Attr? | getAttributeNode | ( | DOMString qualifiedName | ) |
| Attr? | getAttributeNodeNS | ( | DOMString? namespace, | ) |
| DOMString localName | ||||
| Attr? | setAttributeNode | ( | Attr attr | ) |
| Attr? | setAttributeNodeNS | ( | Attr attr | ) |
| Attr? | removeAttributeNode | ( | Attr attr | ) |
| ShadowRoot | attachShadow | ( | ShadowRootInit init | ) |
| Element? | closest | ( | DOMString selectors | ) |
| boolean | matches | ( | DOMString selectors | ) |
| boolean | webkitMatchesSelector | ( | DOMString selectors | ) |
| HTMLCollection | getElementsByTagName | ( | DOMString qualifiedName | ) |
| HTMLCollection | getElementsByTagNameNS | ( | DOMString? namespace, | ) |
| DOMString localName | ||||
| HTMLCollection | getElementsByClassName | ( | DOMString classNames | ) |
| Element? | insertAdjacentElement | ( | DOMString where, | ) |
| Element element | ||||
| undefined | insertAdjacentText | ( | DOMString where, | ) |
| DOMString data |
扩展属性及方法
DOM Parsing and Serialization标准为Element提供了以下扩展的属性及方法。
属性
| 类型 | 名称 |
|---|---|
| DOMString | innerHTML |
| DOMString | outerHTML |
方法
| 返回类型 | 名称 | 参数 | ||
|---|---|---|---|---|
| void | insertAdjacentHTML | ( | DOMString position, | ) |
| DOMString text |
Document接口: Node
属性
只读属性
| 类型 | 名称 |
|---|---|
| DOMImplementation | implementation |
| USVString | URL |
| USVString | documentURI |
| DOMString | compatMode |
| DOMString | characterSet |
| DOMString | charset |
| DOMString | inputEncoding |
| DOMString | contentType |
| DocumentType? | doctype |
| Element? | documentElement |
字典属性
| 类型 | 名称 | 选项 | ||
|---|---|---|---|---|
| dictionary | ElementCreationOptions | { | DOMString is; | } |
方法
| 返回类型 | 名称 | 参数 | ||
|---|---|---|---|---|
| HTMLCollection | getElementsByTagName | ( | DOMString qualifiedName | ) |
| HTMLCollection | getElementsByTagNameNS | ( | DOMString? namespace, | ) |
| DOMString localName | ||||
| HTMLCollection | getElementsByClassName | ( | DOMString classNames | ) |
| Element | createElement | ( | DOMString localName, | ) |
| optional (DOMString or ElementCreationOptions) options = {} | ||||
| Element | createElementNS | ( | DOMString? namespace, | ) |
| DOMString qualifiedName, | ||||
| optional (DOMString or ElementCreationOptions) options = {} | ||||
| DocumentFragment | createDocumentFragment | ( | ) | |
| Text | createTextNode | ( | DOMString data | ) |
| CDATASection | createCDATASection | ( | DOMString data | ) |
| Comment | createComment | ( | DOMString data | ) |
| ProcessingInstruction | createProcessingInstruction | ( | DOMString target, | ) |
| DOMString data | ||||
| Node | importNode | ( | Node node, | ) |
| optional boolean deep = false | ||||
| Node | adoptNode | ( | Node node | ) |
| Attr | createAttribute | ( | DOMString localName | ) |
| Attr | createAttributeNS | ( | DOMString? namespace, | ) |
| DOMString qualifiedName | ||||
| Event | createEvent | ( | DOMString interface | ) |
| Range | createRange | ( | ) | |
| NodeIterator | createNodeIterator | ( | Node root, | ) |
| optional unsigned long whatToShow = 0xFFFFFFFF, | ||||
| optional NodeFilter? filter = null | ||||
| TreeWalker | createTreeWalker | ( | Node root, | ) |
| optional unsigned long whatToShow = 0xFFFFFFFF, | ||||
| optional NodeFilter? filter = null |