DOM
节点
接口是许多其它 DOM API 对象所基于的抽象基类,因此能使这些对象类型使用类似且可经常互换。
作为抽象类,没有这种事情作为纯
节点
对象。所有对象实现的
节点
功能均基于其某一子类。最值得注意的是
Document
,
元素
,和
DocumentFragment
.
此外,每种 DOM 节点都通过接口表示基于
节点
。这些包括
Attr
,
CharacterData
(which
文本
,
注释
,和
CDATASection
全都基于),
ProcessingInstruction
,
DocumentType
,
Notation
,
Entity
,和
EntityReference
.
在某些情况下,特定特征在基
节点
interface may not apply to one of its child interfaces; in that case, the inheriting node may return
null
或根据情况抛出异常。例如:尝试把子级添加到不可以有子级的节点类型会抛出异常。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
除以下特性外,
节点
继承的特性来自其父级,
EventTarget
.
Node.baseURI
只读
DOMString
representing the base URL of the document containing the
节点
.
Node.baseURIObject
只读
nsIURI
object representing the base URI for the element.
Node.childNodes
只读
NodeList
containing all the children of this node.
NodeList
being live means that if the children of the
节点
change, the
NodeList
object is automatically updated.
Node.firstChild
只读
节点
representing the first direct child node of the node, or
null
if the node has no child.
Node.isConnected
只读
Document
object in the case of the normal DOM, or the
ShadowRoot
in the case of a shadow DOM.
Node.lastChild
只读
节点
representing the last direct child node of the node, or
null
if the node has no child.
Node.nextSibling
只读
节点
representing the next node in the tree, or
null
if there isn't such node.
Node.nodeName
只读
DOMString
containing the name of the
节点
. The structure of the name will differ with the node type. E.g. An
HTMLElement
will contain the name of the corresponding tag, like
'audio'
对于
HTMLAudioElement
,
文本
node will have the
'#text'
string, or a
Document
node will have the
'#document'
字符串。
Node.nodeType
只读
unsigned short
representing the type of the node. Possible values are:
| 名称 | 值 |
|---|---|
ELEMENT_NODE
|
1
|
ATTRIBUTE_NODE
|
2
|
TEXT_NODE
|
3
|
CDATA_SECTION_NODE
|
4
|
ENTITY_REFERENCE_NODE
|
5
|
ENTITY_NODE
|
6
|
PROCESSING_INSTRUCTION_NODE
|
7
|
COMMENT_NODE
|
8
|
DOCUMENT_NODE
|
9
|
DOCUMENT_TYPE_NODE
|
10
|
DOCUMENT_FRAGMENT_NODE
|
11
|
NOTATION_NODE
|
12
|
Node.nodeValue
Returns / Sets the value of the current node.
Node.ownerDocument
只读
Document
that this node belongs to. If the node is itself a document, returns
null
.
Node.parentNode
只读
节点
that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns
null
.
Node.parentElement
只读
元素
that is the parent of this node. If the node has no parent, or if that parent is not an
元素
, this property returns
null
.
Node.previousSibling
只读
节点
representing the previous node in the tree, or
null
if there isn't such node.
Node.textContent
Returns / Sets the textual content of an element and all its descendants.
Node.localName
只读
DOMString
representing the local part of the qualified name of an element.
注意: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML.
Node.namespaceURI
只读
null
if it is no namespace.
注意:
In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the
http://www.w3.org/1999/xhtml/
namespace in both HTML and XML trees.
Node.nodePrincipal
从 Gecko 46 起已过时
nsIPrincipal
representing the node principal.
Node.prefix
只读
DOMString
representing the namespace prefix of the node, or
null
if no prefix is specified.
Node.rootNode
只读
节点
object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by
Node.getRootNode()
.
除以下特性外,
节点
继承来自其父级的方法,
EventTarget
.
Node.appendChild(
childNode
)
childNode
argument as the last child to the current node.
Node.cloneNode()
节点
, and optionally, all of its contents. By default, it clones the content of the node.
Node.compareDocumentPosition()
Compares the position of the current node against another node in any other document.
Node.contains()
布尔
value indicating whether or not a node is a descendant of the calling node.
Node.getBoxQuads()
Returns a list of the node's CSS boxes relative to another node.
Node.getRootNode()
Returns the context object's root which optionally includes the shadow root if it is available.
Node.hasChildNodes()
布尔
indicating whether or not the element has any child nodes.
Node.insertBefore()
节点
before the reference node as a child of a specified parent node.
Node.isDefaultNamespace()
布尔
采用值
true
if the namespace is the default namespace on the given node or
false
若不。
Node.isEqualNode()
布尔
which indicates whether or not two nodes are of the same type and all their defining data points match.
Node.isSameNode()
布尔
value indicating whether or not the two nodes are the same (that is, they reference the same object).
Node.lookupPrefix()
DOMString
containing the prefix for a given namespace URI, if present, and
null
if not. When multiple prefixes are possible, the result is implementation-dependent.
Node.lookupNamespaceURI()
null
if not). Supplying
null
for the prefix will return the default namespace.
Node.normalize()
Clean up all the text nodes under this element (merge adjacent, remove empty).
Node.removeChild()
Removes a child node from the current element, which must be a child of the current node.
Node.replaceChild()
节点
of the current one with the second one given in parameter.
Node.getUserData()
DOMUserData
from the node.
Node.hasAttributes()
布尔
indicating if the element has any attributes, or not.
Node.isSupported()
布尔
flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
Node.setUserData()
DOMUserData
to the node.
function removeAllChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild)
}
}
/* ... an alternative to document.body.innerHTML = "" ... */ removeAllChildren(document.body)
The following function recursively calls a callback function for each node contained by a root node (including the root itself):
function eachNode(rootNode, callback) {
if (!callback) {
const nodes = []
eachNode(rootNode, function(node) {
nodes.push(node)
})
return nodes
}
if (false === callback(rootNode)) {
return false
}
if (rootNode.hasChildNodes()) {
const nodes = rootNode.childNodes
for (let i = 0, l = nodes.length; i < l; ++i) {
if (false === eachNode(nodes[i], callback)) {
return
}
}
}
}
eachNode(rootNode, callback)
Recursively calls a function for each descendant node of
rootNode
(including the root itself).
若
callback
is omitted, the function returns an
数组
instead, which contains
rootNode
and all nodes contained within.
若
callback
is provided, and it returns
布尔
false
when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).
rootNode
节点
object whose descendants will be recursed through.
callback
可选
节点
as its only argument. If omitted,
eachNode
返回
数组
of every node contained within
rootNode
(including the root itself).
The following example prints the
textContent
properties of each
<span>
tag in a
<div>
element named
"box"
:
<div id="box"> <span>Foo</span> <span>Bar</span> <span>Baz</span> </div>
const box = document.getElementById("box")
eachNode(box, function(node) {
if (null != node.textContent) {
console.log(node.textContent)
}
})
The above will result in the following strings printing to the user's console:
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
注意:
Whitespace forms part of a
文本
node, meaning indentation and newlines form separate
文本
between the
元素
节点。
The following demonstrates a real-world use of the
eachNode()
function: searching for text on a web-page.
We use a wrapper function named
grep
to do the searching:
function grep(parentNode, pattern) {
const matches = []
let endScan = false
eachNode(parentNode, function(node){
if (endScan) {
return false
}
// Ignore anything which isn't a text node
if (node.nodeType !== Node.TEXT_NODE) {
return
}
if (typeof pattern === "string") {
if (-1 !== node.textContent.indexOf(pattern)) {
matches.push(node)
}
}
else if (pattern.test(node.textContent)) {
if (!pattern.global) {
endScan = true
matches = node
}
else {
matches.push(node)
}
}
})
return matches
}
For example, to find
文本
nodes that contain typos:
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
const mistakes = grep(document.body, pattern)
console.log(mistakes)
| 规范 | 状态 | 注释 |
|---|---|---|
|
DOM
在该规范中的 Node 定义。 |
实时标准 |
Added the following methods:
getRootNode()
|
|
DOM4
在该规范中的 Node 定义。 |
过时 |
Removed the following properties:
属性
,
namespaceURI
,
prefix
,和
localName
.
Removed the following methods:
isSupported()
,
hasAttributes()
,
getFeature()
,
setUserData()
,和
getUserData()
.
|
|
DOM (文档对象模型) 3 级核心规范
在该规范中的 Node 定义。 |
过时 |
方法
insertBefore()
,
replaceChild()
,
removeChild()
,和
appendChild()
returns one more kind of error (
NOT_SUPPORTED_ERR
) if called on a
Document
.
normalize()
method has been modified so that
文本
node can also be normalized if the proper
DOMConfiguration
flag is set.
Added the following methods:
compareDocumentPosition()
,
isSameNode()
,
lookupPrefix()
,
isDefaultNamespace()
,
lookupNamespaceURI()
,
isEqualNode()
,
getFeature()
,
setUserData()
,和
getUserData().
添加下列特性:
baseURI
and
textContent
.
|
|
DOM (文档对象模型) 级别 2 核心规范
在该规范中的 Node 定义。 |
过时 |
ownerDocument
property was slightly modified so that
DocumentFragment
also returns
null
.
添加下列特性:
namespaceURI
,
prefix
,和
localName
.
Added the following methods:
normalize()
,
isSupported()
and
hasAttributes()
.
|
|
DOM (文档对象模型) 1 级规范
在该规范中的 Node 定义。 |
过时 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
节点
|
Chrome
1
|
Edge 12 | Firefox 1 | IE 5 |
Opera
7
|
Safari
1.1
|
WebView Android
1
|
Chrome Android
18
|
Firefox Android 4 |
Opera Android
10.1
|
Safari iOS
1
|
Samsung Internet Android
1.0
|
appendChild
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
baseURI
|
Chrome Yes | Edge 12 | Firefox 1 | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
baseURIObject
弃用
非标
|
Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
childNodes
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5 | Opera 7 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
cloneNode
|
Chrome 1 | Edge 12 | Firefox 1 | IE 6 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
compareDocumentPosition
|
Chrome Yes | Edge 12 | Firefox 9 |
IE
9
|
Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 9 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
包含
|
Chrome 16 | Edge 12 | Firefox 9 |
IE
9
|
Opera 7 | Safari 1.1 | WebView Android ≤37 | Chrome Android 18 | Firefox Android 9 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
firstChild
|
Chrome Yes | Edge 12 | Firefox 1 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
getFeature
弃用
非标
|
Chrome No | Edge No | Firefox No | IE ? | Opera ? | Safari ? | WebView Android No | Chrome Android No | Firefox Android No | Opera Android ? | Safari iOS ? | Samsung Internet Android No |
getRootNode
|
Chrome 54 | Edge 79 | Firefox 53 | IE No | Opera 41 | Safari 10.1 | WebView Android 54 | Chrome Android 54 | Firefox Android 53 | Opera Android 41 | Safari iOS 10.3 | Samsung Internet Android 6.0 |
getUserData
弃用
非标
|
Chrome No | Edge No | Firefox 1 — 22 | IE ? | Opera No | Safari No | WebView Android No | Chrome Android No | Firefox Android 4 — 22 | Opera Android No | Safari iOS No | Samsung Internet Android No |
hasAttributes
弃用
非标
|
Chrome No | Edge 12 — 79 | Firefox No | IE ? | Opera ? | Safari ? | WebView Android No | Chrome Android No | Firefox Android No | Opera Android ? | Safari iOS ? | Samsung Internet Android No |
hasChildNodes
|
Chrome 1 | Edge 12 | Firefox Yes | IE 9 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
insertBefore
|
Chrome 1 | Edge 12 | Firefox 3 | IE 9 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
isConnected
|
Chrome 51 | Edge 79 | Firefox 53 | IE No | Opera 38 | Safari 10.1 | WebView Android 51 | Chrome Android 51 | Firefox Android 45 | Opera Android 41 | Safari iOS 10.3 | Samsung Internet Android 6.0 |
isDefaultNamespace
|
Chrome Yes | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
isEqualNode
|
Chrome 1 | Edge 12 | Firefox 2 | IE 9 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 4 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
isSameNode
|
Chrome Yes | Edge 12 |
Firefox
48
|
IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes |
Firefox Android
48
|
Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
isSupported
|
Chrome No | Edge No | Firefox 1 — 22 | IE ? | Opera ? | Safari ? | WebView Android No | Chrome Android No | Firefox Android 4 — 22 | Opera Android ? | Safari iOS ? | Samsung Internet Android No |
lastChild
|
Chrome Yes | Edge 12 | Firefox 1 | IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 45 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
localName
弃用
非标
|
Chrome
? — 46
|
Edge
12 — 79
|
Firefox
1 — 48
|
IE ? | Opera ? | Safari ? |
WebView Android
? — 46
|
Chrome Android
? — 46
|
Firefox Android 45 | Opera Android Yes | Safari iOS Yes |
Samsung Internet Android
? — 5.0
|
lookupNamespaceURI
|
Chrome Yes | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
lookupPrefix
|
Chrome Yes | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
namespaceURI
弃用
非标
|
Chrome
? — 46
|
Edge
12 — 79
|
Firefox
1 — 48
|
IE ? | Opera ? | Safari ? |
WebView Android
? — 46
|
Chrome Android
? — 46
|
Firefox Android 45 | Opera Android Yes | Safari iOS Yes |
Samsung Internet Android
? — 5.0
|
nextSibling
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5.5 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
nodeName
|
Chrome Yes | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
nodePrincipal
非标
|
Chrome
? — 46
|
Edge ? | Firefox ? | IE ? | Opera ? | Safari ? |
WebView Android
? — 46
|
Chrome Android
? — 46
|
Firefox Android ? | Opera Android ? | Safari iOS ? |
Samsung Internet Android
? — 5.0
|
nodeType
|
Chrome 1 | Edge 12 | Firefox 1 | IE 6 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
nodeValue
|
Chrome Yes | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
normalize
|
Chrome Yes | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
outerText
|
Chrome No | Edge No | Firefox ? | IE ? | Opera No | Safari ? | WebView Android No | Chrome Android No | Firefox Android ? | Opera Android No | Safari iOS ? | Samsung Internet Android No |
ownerDocument
|
Chrome Yes | Edge 12 |
Firefox
Yes
|
IE 9 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes |
Firefox Android
Yes
|
Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
parentElement
|
Chrome 1 | Edge 12 | Firefox 9 |
IE
9
|
Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 9 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
parentNode
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5.5 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
prefix
弃用
非标
|
Chrome No | Edge 12 — 79 |
Firefox
1 — 48
|
IE
Yes
|
Opera No | Safari Yes | WebView Android No | Chrome Android No | Firefox Android 9 | Opera Android No | Safari iOS ? | Samsung Internet Android No |
previousSibling
|
Chrome Yes | Edge 12 | Firefox Yes | IE 5.5 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
removeChild
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
replaceChild
|
Chrome 1 | Edge 12 | Firefox 1 | IE 9 | Opera 7 | Safari 1.1 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
rootNode
弃用
非标
|
Chrome No | Edge No | Firefox No | IE ? | Opera No | Safari ? | WebView Android No | Chrome Android No | Firefox Android No | Opera Android No | Safari iOS ? | Samsung Internet Android No |
setUserData
弃用
非标
|
Chrome No | Edge No | Firefox 1 — 22 | IE ? | Opera No | Safari No | WebView Android No | Chrome Android No | Firefox Android 4 — 22 | Opera Android No | Safari iOS No | Samsung Internet Android No |
textContent
|
Chrome 1 | Edge 12 | Firefox 1 | IE 9 | Opera 9 | Safari 3 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
节点
AbortController
AbortSignal
AbstractRange
Attr
ByteString
CDATASection
CSSPrimitiveValue
CSSValue
CSSValueList
CharacterData
ChildNode
注释
CustomEvent
DOMConfiguration
DOMError
DOMErrorHandler
DOMException
DOMImplementation
DOMImplementationList
DOMImplementationRegistry
DOMImplementationSource
DOMLocator
DOMObject
DOMParser
DOMPoint
DOMPointInit
DOMPointReadOnly
DOMRect
DOMString
DOMTimeStamp
DOMTokenList
DOMUserData
Document
DocumentFragment
DocumentType
元素
ElementTraversal
Entity
EntityReference
事件
EventTarget
HTMLCollection
MutationObserver
NodeFilter
NodeIterator
NodeList
NonDocumentTypeChildNode
ProcessingInstruction
PromiseResolver
范围
StaticRange
文本
TextDecoder
TextEncoder
TimeRanges
TreeWalker
TypeInfo
USVString
UserDataHandler
XMLDocument