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
方法.(谷歌无效)
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…