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。