javascript node类型api解释-CSDN博客

replaceChild

用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

Node.replaceChild(newChild, oldChild);
// **return : 被删除的节点
复制代码

nextSibling

返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。

nodeType

表示的是该节点的类型。

nodeType	value	常量
元素节点	1	Node.ELEMENT_NODE
属性节点	2	元素的耦合属性。在 DOM4 规范里Node 接口将不再实现这个元素属性。
文本节点	3	Node.TEXT_NODE
Comment 节点	8	Node.COMMENT_NODE
Document 节点	9	Node.DOCUMENT_NODE

parentElement

返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个元素节点.则返回null.

Node.parentElement
// **return : 父节点元素
复制代码

parentNode

返回指定的节点在DOM树中的父节点.

Node.parentNode
// **return : DOM树中的父节点
复制代码

parentElement and parentNode

- 一个是W3C标准，一个是争对IE浏览器，parentNode完全实现了parentElement
- 一个是dom节点类型，一个是文档对象类型

previousSibling

返回当前节点的前一个兄弟节点,没有则返回null.

Node.previousSibling;
// **return : 前一个兄弟节点
// <a><b1 id="b1"/><b2 id="b2"/></a>
alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
复制代码

textContent

表示一个节点及其后代的文本内容。

与innerText的区别
- textContent会返回script、style中的内容，innerText不会
- textContent会返回被隐藏的元素内容，innerText受CSS样式影响所以不会
- innerText会触发重排
- 在IE11以下，innerText不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点
与innerHTML的区别
- innerHTML可能会有xss攻击
- innerHTML对性能的影响会更大，影响dom一级事件

isConnected

只读属性，返回Boolean。

如果与DOM树连接，返回true，否则返回false

var element = document.createElement('div');
console.log(element.isConnected) // false
document.body.appendChild(element);
console.log(element.isConnected) // true
复制代码

nodeValue

返回或设置当前节点的值。参考链接

ownerDocument

返回当前节点的顶层对象

node.ownerDocument
// retrun: 节点类型
复制代码

parentElement (IE)

返回当前节点的父元素节点，没有就返回null

if (node.parentElement) {
  node.parentElement.style.color="red"; // 设置父元素的字体颜色
}
复制代码

parentNode

返回指定节点在DOM树中的父节点

node.parentNode
复制代码

appendChild

添加一个节点到指定父节点的子节点列表末尾

node.appendChild(child)
复制代码

如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.

var p = document.getElementById('p');
var cloneP = p.cloneNode(true); // true 缺省值. 深度克隆，拷贝子节点.浅克隆，只拷贝自己本身
p.parentNode.appendChild(cloneP); // 添加被克隆的对象到自己原来的父节点上，保证位置不改变
复制代码

这个方法只能将某个子节点插入到同一个文档的其他位置,如果你想跨文档插入,你需要先调用document.importNode方法.(谷歌无效)

cloneNode方法详解

removeChild

从DOM中删除一个子节点。返回删除的节点。

element.removeChild(child);
复制代码

remove

把从它所属的DOM树中删除对象

elementNodeReference.remove();
复制代码

cloneNode

返回调用该方法节点的副本

var dupNode = node.cloneNode(deep); // dupNode是node的副本
// deep 是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
复制代码

克隆一个元素节点会拷贝它所有属性和属性值，包括dom1级事件，比如onclick；不包括dom2级事件，比如addEventListener
在未添加进dom树之前，被拷贝出来的对象没有父节点
如果选择浅拷贝，那么文本对象都不会被拷贝，因为文本是一个Text节点

importNode

将外部节点拷贝一份，然后可以把这个拷贝的节点插入到当前文档中.

var node = document.importNode(externalNode, deep);
复制代码

例子:(谷歌无效)

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
复制代码

compareDocumentPosition

比较当前节点与任意文档中的另一个节点的位置关系.

node.compareDocumentPosition(otherNode); // node => 当前节点； otherNode => 要比较的节点
// retrun : otherNode节点和node节点的位置关系.
复制代码

返回值参考链接

contains

返回一个Boolean值，来比较传入的节点是否为该节点的后代节点

node.contains( otherNode );
复制代码

hasChildNodes

返回一个布尔值,表明当前节点是否包含有子节点.

node.hasChildNodes();
复制代码

insertBefore

在某个节点之前插入新的节点,返回被插入节点

var insertedElement = parentElement.insertBefore(newElement, referenceElement);
复制代码

isEqualNode

判断两个节点是否相等。当两个节点的类型相同，定义特征(defining characteristics)相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。一些具体的数据指出：多数时候的比较是根据节点的类型来的。

var isEqualNode = node.isEqualNode(otherNode);
复制代码

normalize

将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。

element.normalize();
复制代码

参考链接

原文地址 : linkorg.club/node-api-md…