Node

Node 是一个接口，许多 DOM API 对象的类型会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。

以下接口都从 Node 继承其方法和属性：

在方法和属性不相关的特定情况下，这些接口可能返回 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="https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget" 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="https://developer.mozilla.org/zh-CN/docs/Web/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^[1] 继承属性。

Node.baseURI只读

返回一个表示base URL的DOMString。不同语言中的base URL的概念都不一样。 在HTML中，base URL表示协议和域名，以及一直到最后一个'/'之前的文件目录。

Node.baseURIObject 

(不适用于网页内容) 只读的 nsIURI 对象表示元素的base URI.

Node.childNodes只读

返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是“实时的”意思是，如果该节点的子节点发生了变化，NodeList对象就会自动更新。 

Node.firstChild 只读

返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。

Node.isConnected只读

返回一个布尔值用来检测该节点是否已连接(直接或者间接)到一个上下文对象上，比如通常DOM情况下的Document对象，或者在shadow DOM情况下的ShadowRoot对象。

Node.lastChild 只读

返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。

Node.nextSibling 只读

返回与该节点同级的下一个节点 Node，如果没有返回null。

Node.nodeName 只读

返回一个包含该节点名字的DOMString。节点的名字的结构和节点类型不同。比如HTMLElement的名字跟它所关联的标签对应，就比如HTMLAudioElement的就是 'audio' ，Text节点对应的是 '#text' 还有Document节点对应的是 '#document'。

Node.nodeType只读

返回一个与该节点类型对应的无符号短整型的值，可能的值如下：

Name	Value
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

返回或设置当前节点的值。

Node.ownerDocument 只读

返回这个元素属于的 Document对象 。 如果没有Document对象与之关联，返回null。

Node.parentNode 只读

返回一个当前结点 Node的父节点 。如果没有这样的结点,，比如说像这个节点是树结构的顶端或者没有插入一棵树中， 这个属性返回null。

Node.parentElement 只读

返回一个当前节点的父节点 Element 。 如果当前节点没有父节点或者说父节点不是一个元素(Element), 这个属性返回null。

Node.previousSibling 只读

返回一个当前节点同辈的前一个结点( Node) ，或者返回null（如果不存在这样的一个节点的话）。

Node.textContent

返回或设置一个元素内所有子结点及其后代的文本内容。

废弃的属性

Node.localName 只读

Returns a DOMString representing the local part of the qualified name of an element.

Note: 在Firefox 3.5以及更早的版本中, 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 只读

该节点命名空间的URL，如果没有命名空间则为null。

Note: 在Firefox 3.5以及更早的版本中, HTML 的元素都没有命名空间. 而在最新的版本中, 无论是 HTML 还是 XML 文档树 ，所有元素的命名空间统一为 http://www.w3.org/1999/xhtml/。

Node.nodePrincipal 已废弃 Gecko 46

A nsIPrincipal representing the node principal.

Node.prefix 只读

Is a DOMString representing the namespace prefix of the node, or null if no prefix is specified.

Node.rootNode 只读

Returns a 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().

方法

从其父类型 EventTarget^[1] 继承方法。

Node.appendChild()

将指定的 childNode 参数作为最后一个子节点添加到当前节点。
如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。

Node.cloneNode()

克隆一个 Node，并且可以选择是否克隆这个节点下的所有内容。默认情况下，节点下的内容会被克隆。

Node.compareDocumentPosition()

比较当前节点与文档中的另一节点的位置。

Node.contains()

返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。

Node.getRootNode()

返回上下文对象的根结点。如果shadow root节点存在的话，也可以在返回的节点中包含它。

Node.hasChildNodes()

返回一个Boolean 布尔值，来表示该元素是否包含有子节点。

Node.insertBefore()

在当前节点下增加一个子节点 Node，并使该子节点位于参考节点的前面。

Node.isDefaultNamespace()

Accepts a namespace URI as an argument and returns a Boolean with a value of true if the namespace is the default namespace on the given node or false if not.

Node.isEqualNode()

Returns a Boolean which indicates whether or not two nodes are of the same type and all their defining data points match.

Node.isSameNode()

Returns a Boolean value indicating whether or not the two nodes are the same (that is, they reference the same object).

Node.lookupPrefix()

Returns a 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.

废弃的方法

Node.getFeature()

x

Node.getUserData()

Allows a user to get some DOMUserData from the node.

Node.hasAttributes()

Returns a Boolean indicating if the element has any attributes, or not.

Node.isSupported()

Returns a 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.

例子

移除某个节点的所有子节点

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

使用示例

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

遍历所有子节点

下面这个函数使用递归的方式遍历一个节点的所有子节点（包括这个根节点自身）。

function eachNode(rootNode, callback){
	if(!callback){
		var nodes = [];
		eachNode(rootNode, function(node){
			nodes.push(node);
		});
		return nodes;
	}

	if(false === callback(rootNode))
		return false;

	if(rootNode.hasChildNodes()){
		var nodes = rootNode.childNodes;
		for(var i = 0, l = nodes.length; i < l; ++i)
			if(false === eachNode(nodes[i], callback))
				return;
	}
}

语法

eachNode(rootNode, callback);

描述

使用递归的方式对 rootNode 的所有后代节点执行回调函数（包括 rootNode 自身）

如果没有设定 callback，这函数会返回一个Array，包含 rootNode 和它的所有后代节点。

如果设定了 callback（回调函数），如果回调函数在调用中返回 Boolean false，则当前层级的遍历会中止，同时恢复上一层级的遍历。这个可以用来在找到需要的节点之后中断循环（比如用来查找包含指定文本的文本节点）

参数

rootNode

需要进行后代节点遍历的 Node 对象。

callback

一个可选的回调函数，接受一个节点作为唯一参数。如果没有设定， eachNode 返回一个包含了 rootNode 所有后代节点以及 rootNode 自身的Array

使用示例

下述例子会打印出ID为 "box" 的 <div> 标签内的所有 <span> 标签的 textContent 属性：

<div id="box">
	<span>Foo</span>
	<span>Bar</span>
	<span>Baz</span>
</div>

var box = document.getElementById("box");
eachNode(box, function(node){
	if(null != node.textContent){
		console.log(node.textContent);
	}
});

用户终端上会显示如下字符：

"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"

真实案例

下述例子反应了 eachNode 函数是如何在真实场景中使用的：搜索网页中的文本。我们使用一个包装函数 grep 去执行搜索：

function grep(parentNode, pattern){
	var matches = [];
	var 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("string" === typeof pattern){
			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;
}

例如：找到所有包含错别字的 Text：

var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"];
var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi");
var mistakes = grep(document.body, pattern);
console.log(mistakes);

规范

浏览器兼容性