Node

DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of its subclasses. Most notable are Document , Element ,和 DocumentFragment .

In addition, every kind of DOM node is represented by an interface based on Node . These include Attr , CharacterData (which Text , Comment ,和 CDATASection are all based on), ProcessingInstruction , DocumentType , Notation , Entity ,和 EntityReference .

In some cases, a particular feature of the base Node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances. For example, attempting to add children to a node type that cannot have children will throw an exception.

特性

In addition to the properties below, Node inherits properties from its parent, EventTarget .

Node.baseURI 只读
返回 DOMString representing the base URL of the document containing the Node .
Node.baseURIObject 只读
(Not available to web content.) The nsIURI object representing the base URI for the element.
Node.childNodes 只读
Returns a live NodeList containing all the children of this node. NodeList being live means that if the children of the Node change, the NodeList object is automatically updated.
Node.firstChild 只读
返回 Node representing the first direct child node of the node, or null if the node has no child.
Node.isConnected 只读
A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the Document object in the case of the normal DOM, or the ShadowRoot in the case of a shadow DOM.
Node.lastChild 只读
返回 Node representing the last direct child node of the node, or null if the node has no child.
Node.nextSibling 只读
返回 Node representing the next node in the tree, or null if there isn't such node.
Node.nodeName 只读
返回 DOMString containing the name of the Node . 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' for an HTMLAudioElement Text node will have the '#text' string, or a Document node will have the '#document' string.
Node.nodeType 只读
Returns an unsigned short representing the type of the node. Possible values are:
Name
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 只读
返回 Node 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 只读
Returns an Element that is the parent of this node. If the node has no parent, or if that parent is not an Element , this property returns null .
Node.previousSibling 只读
返回 Node 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 只读
The namespace URI of this node, or 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 Obsolete since Gecko 46
A nsIPrincipal representing the node principal.
Node.prefix 只读
DOMString representing the namespace prefix of the node, or null if no prefix is specified.
Node.rootNode 只读
返回 Node 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() .

方法

In addition to the properties below, Node inherits methods from its parent, EventTarget .

Node.appendChild( childNode )
Adds the specified childNode argument as the last child to the current node.
If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
Node.cloneNode()
Clone a Node , 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()
返回 Boolean 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()
返回 Boolean indicating whether or not the element has any child nodes.
Node.insertBefore()
Inserts a Node before the reference node as a child of a specified parent node.
Node.isDefaultNamespace()
Accepts a namespace URI as an argument and returns a Boolean 采用值 true if the namespace is the default namespace on the given node or false if not.
Node.isEqualNode()
返回 Boolean which indicates whether or not two nodes are of the same type and all their defining data points match.
Node.isSameNode()
返回 Boolean 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()
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and 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()
Replaces one child Node of the current one with the second one given in parameter.

Obsolete methods

Node.getUserData()
Allows a user to get some DOMUserData from the node.
Node.hasAttributes()
返回 Boolean indicating if the element has any attributes, or not.
Node.isSupported()
返回 Boolean 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()
Allows a user to attach, or remove, DOMUserData to the node.

范例

Remove all children nested within a node

function removeAllChildren(element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild)
  }
}
					

Sample usage

/* ... an alternative to document.body.innerHTML = "" ... */
removeAllChildren(document.body)
					

Recurse through child nodes

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 Array instead, which contains rootNode and all nodes contained within.

callback is provided, and it returns Boolean 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
Node object whose descendants will be recursed through.
callback 可选
An optional callback function that receives a Node as its only argument. If omitted, eachNode 返回 Array of every node contained within rootNode (including the root itself).

Sample usage

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 Text node, meaning indentation and newlines form separate Text between the Element nodes.

Realistic usage

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 Text 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)
					

规范

规范 状态 Comment
DOM
The definition of 'Node' in that specification.
实时标准 Added the following methods: getRootNode()
DOM4
The definition of 'Node' in that specification.
Obsolete Removed the following properties: attributes , namespaceURI , prefix ,和 localName .
Removed the following methods: isSupported() , hasAttributes() , getFeature() , setUserData() ,和 getUserData() .
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Node' in that specification.
Obsolete The methods 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 Text 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().
Added the following properties: baseURI and textContent .
Document Object Model (DOM) Level 2 Core Specification
The definition of 'Node' in that specification.
Obsolete ownerDocument property was slightly modified so that DocumentFragment also returns null .
Added the following properties: namespaceURI , prefix ,和 localName .
Added the following methods: normalize() , isSupported() and hasAttributes() .
Document Object Model (DOM) Level 1 Specification
The definition of 'Node' in that specification.
Obsolete 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Node Chrome 1
1
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
Edge 12 Firefox 1 IE 5 Opera 7
7
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
Safari 1.1
1.1
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
WebView Android 1
1
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
Chrome Android 18
18
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
Firefox Android 4 Opera Android 10.1
10.1
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
Safari iOS 1
1
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
Samsung Internet Android 1.0
1.0
WebKit and old versions of Blink incorrectly do not make Node inherit from EventTarget .
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
9
Only supports contains for elements
Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 9 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
contains Chrome 16 Edge 12 Firefox 9 IE 9
9
Only supports contains for HTML elements and not for SVG elements.
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
48
不支持 1 — 10
IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 48
48
不支持 4 — 10
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
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Edge 12 — 79
不支持 12 — 79
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Firefox 1 — 48
不支持 1 — 48
This API was moved to the Element and Attr APIs according to the DOM4 standard.
IE ? Opera ? Safari ? WebView Android ? — 46
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Chrome Android ? — 46
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Firefox Android 45 Opera Android Yes Safari iOS Yes Samsung Internet Android ? — 5.0
不支持 ? — 5.0
This API was moved to the Element and Attr APIs according to the DOM4 standard.
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
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Edge 12 — 79
不支持 12 — 79
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Firefox 1 — 48
不支持 1 — 48
This API was moved to the Element and Attr APIs according to the DOM4 standard.
IE ? Opera ? Safari ? WebView Android ? — 46
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Chrome Android ? — 46
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Firefox Android 45 Opera Android Yes Safari iOS Yes Samsung Internet Android ? — 5.0
不支持 ? — 5.0
This API was moved to the Element and Attr APIs according to the DOM4 standard.
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
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? — 46
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Chrome Android ? — 46
不支持 ? — 46
This API was moved to the Element and Attr APIs according to the DOM4 standard.
Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ? — 5.0
不支持 ? — 5.0
This API was moved to the Element and Attr APIs according to the DOM4 standard.
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
Yes
9
ownerDocument of doctype nodes (that is, nodes for which Node.nodeType is Node.DOCUMENT_TYPE_NODE or 10) is no longer null. Instead, the ownerDocument is the document on which document.implementation.createDocumentType() was called.
IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes
Yes
9
ownerDocument of doctype nodes (that is, nodes for which Node.nodeType is Node.DOCUMENT_TYPE_NODE or 10) is no longer null. Instead, the ownerDocument is the document on which document.implementation.createDocumentType() was called.
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
parentElement Chrome 1 Edge 12 Firefox 9 IE 9
9
Only supported on Element .
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
不支持 1 — 48
This API was moved to the Element and Attr APIs according to the DOM4 standard.
5
this property was read-write; starting with Firefox 5.0 it is read-only, following the specification.
IE Yes
Yes
Only supported on Element .
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

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。