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