js 对象数组遍历 DOM 模型概述(5)

如果insertBefore方法的第二个参数为null，则新节点将插在当前节点内部的最后位置，即变成最后一个子节点。

注意，如果所要插入的节点是当前DOM现有的节点，则该节点将从原位置移除，插入新的位置。

由于不存在insertAfter方法，如果要插入当前某个子节点的子节点后面，可以用insertBefore方法结合nextSibling属性模拟。

parent.insertBefore(s1,s2.nextSibling);

上面代码中，parent是父节点，s1是一个全新的节点，s2是可以将s1节点，插在s2节点的后面，如果s2是当前节点的最后一个子节点，则s2.nextSibling返回null，这是s1节点会插在当前节点的最后，变成当前节点的最后一个子节点，等于紧跟在s2后面。

Node.removeChild()

Node.removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。他返回被移除的子节点。

var divA = document.getElementById('divA');

divA.parentNode.removeChild(divA);

上面代码是如何移除一个指定节点。

注意，这个方法是在父节点上调用的，不是在被移除的节点上调用的。

下面是如何移除当前节点的所有子节点。

var element = document.getElementById('top');

while(element.firstChild){

element.removeChild(element.firstChild);

}

它移除的节点依然存在于内存之中，但不在是DOM的一部分。所以一个节点移除以后，依然可以使用它，比如插入另一个节点下面。

Node.replaceChild()

Node.replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。他可以接受两个参数，第一个参数是用来替换的新节点，第二个参数将要替换走的子节点。他返回那个被替换走的那个节点。

replaceNode = parentNode.replaceChild(newChild,oldChild);

下面是一个例子。

var divA = document.getElementById('A');

var newSpan = document.createElement('span');

divA.parentNode.replaceChild(newSpan,div);

上面代码是如何替换指定节点。

Node.contains()

Node.contains方法可以接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。

document.body.contains(node);

上面代码检查某个节点，是否包含在当前文档之中。

注意，如果将当前节点传入contains方法，会返回true。虽然意义上说，一个节点不应该包含自身。

nodeA.contains(nodeA); // true

Node.compareDocumentPosition()

compareDocumentPosition方法的用法，与contains方法完全一致，返回一个7个比特位的二进制值，表示参数节点与当前节点的关系。

二进制值

数值

含义

000000

0

两个节点相同

000001

1

两个节点不在同一个文档

000010

2

参数节点在当前节点前面

000100

4

参数节点在当前节点后面

001000

8

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-58611-5.html