Node
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
Node 是一个接口,各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象;比如,继承同一组方法,或者用同样的方式测试。
以下接口都从 Node 继承其方法和属性:
Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
在方法和属性不相关的特定情况下,这些接口可能返回 null。它们可能会抛出异常 - 例如,当将子节点添加到不允许子节点存在的节点时。
属性
从其父类型 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_NODE1ATTRIBUTE_NODE已弃用2TEXT_NODE3CDATA_SECTION_NODE4ENTITY_REFERENCE_NODE已弃用5ENTITY_NODE已弃用6PROCESSING_INSTRUCTION_NODE7COMMENT_NODE8DOCUMENT_NODE9DOCUMENT_TYPE_NODE10DOCUMENT_FRAGMENT_NODE11NOTATION_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已弃用 只读-
返回一个表示元素名称的本土化表示方法的
DOMString。备注: 在 Firefox 3.5 以及更早的版本中,HTML 元素的 localName 属性的返回值都是大写的(XHTML 例外)。在后续版本中,这种情况就不存在了。无论是 HTML 还是 XHTML 中,均返回小写的 localName。
Node.namespaceURI已弃用 只读-
该节点命名空间的
URL,如果没有命名空间则为null。备注: 在 Firefox 3.5 以及更早的版本中,HTML 的元素都没有命名空间。而在最新的版本中,无论是 HTML 还是 XML 文档树,所有元素的命名空间统一为
http://www.w3.org/1999/xhtml/。 Node.nodePrincipal非标准 已弃用-
返回节点优先级
nsIPrincipal。 Node.prefix已弃用 只读-
返回一个节点命名空间的前缀
DOMString, 当前缀不存在时返回null。 Node.rootNode已弃用 只读-
返回一个 DOM 树中顶层节点的
Node对象,如果顶层节点不 DOM 树中,则返回当前节点。该属性已被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()-
返回一个
Boolean类型值。接受一个命名空间 URI 作为参数,当参数所指代的命名空间是默认命名空间时返回 true,否则返回 false。 Node.isEqualNode()-
返回一个
Boolean类型值。当两个 node 节点为相同类型的节点且定义的数据点匹配时(即属性和属性值相同,节点值相同)返回 true,否则返回 false。 Node.isSameNode()-
返回一个
Boolean类型值。返回这两个节点的引用比较结果。 Node.lookupPrefix()-
返回包含参数 URI 所对应的命名空间前缀的
DOMString,若不存在则返回 null。如果存在多个可匹配的前缀,则返回结果和浏览器具体实现有关。 Node.lookupNamespaceURI()-
接受一个前缀,并返回前缀所对应节点命名空间 URI。如果 URI 不存在则返回 null。传入 null 作为 prefix 参数将返回默认命名空间。
Node.normalize()-
对该元素下的所有文本子节点进行整理,合并相邻的文本节点并清除空文本节点。
Node.removeChild()-
移除当前节点的一个子节点。这个子节点必须存在于当前节点中。
Node.replaceChild()-
对选定的节点,替换一个子节点
Node为另外一个节点。
废弃的方法
Node.getFeature()已弃用Node.getUserData()已弃用-
允许用户从节点的
DOMUserData获得数据。 Node.hasAttributes()已弃用-
返回一个
Boolean指定该元素是否存在某一属性。 Node.setUserData()已弃用-
允许用户在一个节点上设置或移除
DOMUserData。
示例
>移除某个节点的所有子节点
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;
}
}
描述
使用递归的方式对 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");
备注:
空格是构成 Text节点的一部分,意味着缩进和换行在 Element 节点之间形成单独的 Text 。
真实案例
下述例子反应了 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);
规范
| Specification |
|---|
| DOM> # interface-node> |
浏览器兼容性
Loading…