快速了解JavaScript的DOM模型( 七 ) _DOM模型

previousSibling/nextSiblingnode.previousSibling属性用于访问之前的同级节点；node.nextSibling属性用于访问之后的同级节点。具有相同父节点为同级节点，之前或之后表示它们在文档中出现的顺序。实例如下：
document.getElementById('divId2').previousSibling;document.getElementById('divId2').nextSibling;ownerDocumentnode.ownerDocument属性用于返回元素的根节点，即：文档对象（Document）。通过这个属性，我们能够直接访问根节点而不必层层遍历。实例如下：
document.getElementById('divId2').ownerDocument;Element TraversalElement Traversal API 为DOM元素添加了以下5个属性。

childElementCount：返回子元素（不包括文本节点和注释）的格式。
firstElementChild：指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

支持的浏览器为DOM元素添加了这些属性，利用这些元素不必担心空白文档节点，从而可以更方便地查找DOM元素。
DOM操作因为关系节点都是只读的，所以DOM提供了一些操作节点的方法。
appendChild()node.appendChild(newChild)方法用于向childNodes列表的末尾添加一个节点并返回新增的节点。
var returnedNode = div.appendChild(newNode);insertBefore()node.insertBefore(newChild, refChild)方法会在指定的参照节点refChild之前插入新节点newChild 。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果refChild是null，则insertBefore()与appendChild()执行相同的操作。
var returnedNode = div.insertBefore(newNode, div.lastChild);replaceChild()node.replaceChild(newChild, oldChild)方法将要替换的节点oldChild移除，并将要插入的节点newChild插入并占据其位置。实例如下：
document.getElementById('divId2').replaceChild(newnode, oldnode);在使用replaceChild()插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过来。被替换的节点仍然还在文档中，但它在文档中已经没有自己的位置了。
removeChild()而如果只想移除而非替换节点，可以使用node.removeChild(oldChild)方法，该方法将要移除的节点oldChild移除，并返回移除的节点。
var removedNode = node.removeChild(node.firstChild);与使用replaceChild()方法一样，通过removeChild()移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置。
上面介绍的四种方法操作的都是某个节点的子节点，要使用这几个方法必须先取得父节点。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用这些方法，将会导致错误发生。
DOM创建DOM节点创建最常用的便是document.createElement()和document.createTextNode()方法。
createElement()document.createElement(tagName)方法根据指定tagName标签名创建新元素节点，返回一个HTMLElement对象。标签名在HTML文档中不区分大小写，在XML（包括XHTML）文档中区分大小写。例如，创建一个<p>元素。
var p = document.createElement('p');在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性。
createTextNode()document.createTextNode(data: string)方法根据指定data文本创建新文本节点。作为参数的文本按照HTML或XML的格式进行编码。
var textNode = document.createTextNode("<h4>Hello </h4> world!");在创建新文本节点的同时，也会为其设置ownerDocument属性。
cloneNode()node.cloneNode(deep)方法用于对调用这个方法的节点创建一个完全相同的副本。deep是布尔值，设置是否执行深复制。默认为false，执行浅复制（只复制节点本身）；当为true时，执行深复制（复制节点及其整个子节点树）。
var node = document.getElementById('divId2').lastChild.cloneNode(true);这些用于创建节点和复制节点的方法，创建或复制的节点并不会出现在文档中，需要通过appendChild()、insertBefore()或replaceChild()将它添加到文档中。
document.getElementById('divId2').appendChild(node);不管是createElement()、createTextNode()或者cloneNode()三种的哪种方法，创建新的节点都未被添加到文档树中。可以使用上面介绍的appendChild()、insertBefore()或replaceChild()方法将新节点添加到文档树中。