Node方法

appendChild(obj):使某节点成为另一个节点的最后一个子节点

参数是节点对象。

如果给的是已经在DOM中存在的节点,此方法会将它从原来的位置移动到新位置。

如果给的是DocumentFragment节点,此方法会将它的所有子节点都插入,返回空的Document节点。

hasChildNodes(obj):有子节点吗?

其他方法:

node.firstChild !==null;

node.childNodes && node.childNodes.length>0;

cloneNode(boolean):除了克隆节点,子节点要克隆吗?

克隆节点的全部属性,但会丢失addEventListener方法和on-属性(node.onclick=fn),也就是添加在这个节点上的事件回调函数。

克隆的结果节点不再文档中,当然也没得父节点。可以用Node.appendChild来添加至文档之中。

克隆的结果节点和原节点可能会有一样的id,修改一下。

insertBefore(newNode,referenceNode):把某个节点插入到父节点的某个位置

newNode:被插入的节点;referenceNode:父节点的某个子节点

本质是插在某节点之前,如果被插者为空,也就是插在空之前,很明显插入者成为了最后一个子节点;如果被插者是DOM现存节点,则被插者从原位置移动到新位置。

如果插入者是DocumentFragment类型,那么其所有子节点都会被插入,返回一个空的DocumentFragment节点。

说到现在都是插在某节点之前,如果想要插在某节点的后面咋办?

那就通过插入到该节点后面的节点(nextSibling)的方式嘛。

老师指定你能在班级选一个位置坐,但老师说了,你现在只能选择坐在一个人的前面。

你暗恋翠花许久,好家伙,你一看翠花后面是马保国,啪的一下很快啊,你就跑到马保国前面去了。

你和老师说:老师,伦家想坐在马保国前面。说白了,虽然明面上没提翠花,但是!你说我要坐在翠花后面和要坐在马保国前面的结果是一样一样的。

removeChild(childNode):删除某个子节点

参数不是子节点会报错,如果是子节点会返回被删除的子节点。

var v=document.getElementById('ele');

while(v.firstChild){

  v.removeChild(v.firstChild);

}

这段代码能够删除某节点的所有子节点。

被删除的节点依然存在于内存之中,在需要时(将它插入到DOM中),还能发光发热。但从DOM中消失了。

replaceChild(newChild,oldChild):替换子节点

把原先的子节点换成新的,返回原先的子节点。

contains(node):比较两个节点,是我或是我子孙?

两个主角a和b:

a:你是我?

b:不是

a:你是我儿子?

b:不是

a:你是我孙子?

b:是

说白了就是做亲子鉴定,是就是,返回true。

compareDocumentPosition():同上,但返回一个表示两个节点关系的六位二进制数字

二进制值

十进制值含义
000000 0 两个节点相同
000001 1 两个节点不在同一个文档(即有一个节点不在当前文档)
000010 2 参数节点在当前节点的前面
000100 4 参数节点在当前节点的后面
001000 8 参数节点包含当前节点
010000 16 当前节点包含参数节点
100000 32 浏览器内部使用

每个数字都有其特定的含义,操作不一样的数字当然会有不一样的结果发生,这个结果当然也有意义。

isEqualNode():类型,属性,子节点是否完全相同

isSameNode():同一个节点吗?容不下半点偏差

normalize():删除节点的所有文本节点

去掉空的文本节点,把相邻的文本节点合并为一个

getRootNode():节点所在文档的根节点

document.body.firstChild.getRootNode() ===document

document.getRootNode() //document

document.ownerDocument() //null

原文地址:https://www.cnblogs.com/flyover/p/14179743.html