javascript中易混淆的dom属性及方法对比

parentnode.children vs node.prototype.childnodes

parentnode.children：该属性继承自parentnode，返回值是一个htmlcollection实例，成员是当前节点的所有元素子节点，该属性只读，且该属性是动态集合。

node.prototype.childnodes：该属性继承自node，返回值是一个nodelist实例，成员是当前节点的所有子节点（包括但不限于元素子节点），该属性也是个动态集合。

parentnode.firstelementchild vs node.prototype.firstchild

parentnode.firstelementchild：该属性返回当前节点的第一个元素子节点，如果没有任何元素子节点，则返回null。

node.prototype.firstchild：该属性返回当前节点的第一个子节点（包括但不限于元素子节点），如果没有任何子节点则返回null。

parentnode.lastelementchild vs node.prototype.lastchild

同上。

childnode.remove() vs node.prototype.removechild()

childnode.remove()：该方法用于从父节点中移除当前节点，没有返回值。

el.remove();    // 从dom中移除了el节点

node.prototype.removechild()：该方法接受一个子节点作为参数，用于从当前节点移除该子节点，返回值是被移除的子节点。需要注意的是，被移除的节点依然存在于内存之中，但不再是dom的一部分，所以，一个节点被移除以后，可以复用。

document.body.removechild(el);  // 从dom中移除了el节点

childnode.before() vs node.prototype.insertbefore()

childnode.before()：该方法用于在当前节点的前面，插入一个或多个同级节点，插入完成后，新节点与当前节点拥有相同的父节点。该方法无返回值。

var p = document.createelement('p');
var p1 = document.createelement('p');

// 插入元素节点
el.before(p);

// 插入文本节点
el.before('hello');

// 插入多个元素节点
el.before(p, p1);

// 插入元素节点和文本节点
el.before(p, 'hello');

node.prototype.insertbefore()：该方法接受两个参数，第一个参数newnode，第二个参数referencenode，用于将newnode插入到referencenode前面，返回值是插入的新节点newnode。注意，newnode的类型必须是node，也就是说该方法不能用于插入文本节点。当referencenode不是当前节点的子节点是将会报错。

childnode.replacewith() vs node.prototype.replacechild()

childnode.replacewith()：该方法接受一个参数newnode，当前节点江北newnode节点替换。该函数无返回值。

var span = document.createelement('span');
el.replacewith(span);   // el将被span节点替换，但el仍在内存中

node.prototype.replacechild()：该方法接受两个参数：newchild和oldchild。oldchild将会被newchild替换，返回值是oldchild。