DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動

1.DOM中兩個節點存在的關係無非3種：

1.1  包含與被包含,IE率先引入的contains()方法可檢測，例 A.contains(B)， 即檢查節點B是不是節點A的子節點，返回布爾值，現大多數瀏覽器都支持； DOM level 3引入的compareDocumentPosition()，肯定節點之間的關係， 返回值爲一個表示關係的位掩碼（見圖-1）的合(或者是按位或的值，並不知道具體實現)， 經過按位與操做符「&」可肯定關係。例:節點A(例：)在節點B(例：)前--位掩碼爲4， 且節點A包含節點B--位掩碼爲16,則返回值爲20，經過"!!(20&16)"這種方式便可返回一個布爾值， 解析：「20&16」返回16證實節點A包含節點B（即：16），經過!!取得16的布爾值true。 

1.2  父與子 獲取父節點：node.parentNode, node.parentElement,二者的區別在於後者只能獲取元素，例如：圖-2； 獲取子節點：childNodes(以NodeList對象存在的子節點集合),firstChild,lastChild 

1.3同輩（兄弟節點） nextSibling，previousSibling

1.4Element Travel API給DOM添加的屬性 childElementCount,firstElementChild,lastElementChild,nextElementSibling， previousElementSibling ,他們與以前的方法之間的區別是多了Element，保證只返回元素節點，而以前的方法普通的文本節點及註釋節點也會返回,以前的方法在非IE瀏覽器中還會把元素間的空白符當文本節點返回。 

1.5children屬性（IE9之後） 與childNodes不一樣的地方在於：children只包含元素子節點(IE8及以前的版本可能會包含註釋節點)。 

 2.如何在節點之間任意移動？ 根據上面提到的屬性值移動就行了（感受這句話水水的） 來吧， 給我一個支點（節點）讓我撬起地球（任意移動）啊！

每一個位掩碼對應的含義：

parentElement 與parentNode的對比