Dom樹結構和dom操作
DOM 結構樹（繼承關系）
-
Node -- 原型為 EventTarget 原型為 Object 原型為 null
-
Document (文檔)
-
HTMLDocument document文檔
-
XmlDoucment xml文檔
-
-
CharacterData
-
Text --> 文本
-
Comment -->注釋
-
-
Element(文檔中的元素)
-
HTMLElement --> 元素超集
-
HTMLHeaderElement
-
HTMLBodyElement
-
HTMLTitleElement
-
HTMLParagraphElement -->
-
HTMLInputElement
-
HTMLHDivElement
-
........
-
-
-
Attr
-
節點（所有元素的超集接口）的四個屬性
-
nodeName: 節點名稱 只讀
-
nodeValue : 節點的內容可讀可寫 只有注釋節點和文本節點有，其他為null
-
nodeType : 節點類型 只讀
-
元素節點 - 1 就是dom元素 例如：div、span、p等
-
屬性節點 - 2 dom.attributes 該元素的屬性節點集合 dom.attributes[0].name dom.attributes[0].value 可改變其值，不能改變名字
-
文本節點 - 3 包括空格回車等
-
注釋節點 - 8
-
document - 9 一個 Document 節點。
-
文檔類型節點 -10 描述文檔類型的 DocumentType 節點。例如 就是用於 HTML5 的。
-
documentFragment - 11 一個 DocumentFragment 節點
-
還有一些已經棄用的
-
遍歷節點樹 (都為屬性) 兼容性好 但是會選出來文本或者注釋
-
parentNode --> 父節點 只有一個 最頂級的節點為 document
-
childNode --> 所有的兒子節點
-
firstChild --> 第一個節點
-
lastChild --> 最后一個子節點
-
nextSibling --> 緊接着的后一個兄弟節點
-
previousSilbing --> 緊接着的前一個兄弟節點
遍歷元素節點樹 (都為屬性) 不兼容都為IE9及以下不兼容
-
parentElement --> 父元素節點 只有一個 最頂級的節點為 null不是document （IE不兼容）
-
children --> 所有的兒子元素節點
-
firstElementChild --> 第一個元素子節點（IE不兼容）
-
lastElementChild --> 最后一個元素子節點 （IE不兼容）
-
nextElementSibling --> 緊接着的后一個兄弟元素節點 （IE不兼容）
-
previousElementSilbing --> 緊接着的前一個兄弟元素節點 （IE不兼容）
查找元素
-
getElementById() 定義在Document.prototype 上，即Element節點不能訪問
-
getElementsByName() 定義在HTMLDocument.prototype上，即非html元素不能使用（例：xml,element）
-
getElementsByTagName() 定義在Document.prototype上，和Element.prototype 兼容性最好
-
HTMLDocument.prototype上定義了常用屬性（例如：body,head）分別指向文檔中的和標簽
-
Document.prototype定義了documentElement屬性，指代文檔根元素即 標簽
-
getElementsByClassName 、querySelectorALl 、querySelector 在Document.prototype 和 Element.prototype 中都有定義。
增加元素 (document 對象的方法)
-
document.createElement();
-
document.createTextNode();
-
document.createComment();
-
document.createDocumentFragment();創建一個文檔片段，當追加到文檔中時，此元素會消失，不顯示出來
插入元素
-
parentNode.appendChild(); (Node 對象的方法) 向父元素中加入一個子元素，只能為（Node）不能是（DOMString）只能傳入一個參數 可以將已有的元素剪切到，另一個地方
-
parentNode.append(); (Element 對象的方法) 是實驗中的方法有兼容性問題，可以接收（DOMString、Node類型）參數可以為多個
-
parentNode.insertBefore(a,b); 在parentNode元素中的 b元素之前插入a元素；且b必須已經在dom結構中；插入a在b之前
刪除元素
-
parent.removeChild(son); (Node 對象的方法) 返回被刪除的對象
-
dom.remove(); (Element 對象的方法) 沒有返回值
替換 (Node 對象的方法)
- parent.replaceChild(new ,old); 會將舊元素返回
Element
常用屬性
-
innerHTML 復制會覆蓋其他元素
-
innerText 賦值會覆蓋其他元素（老火狐不兼容）常用
-
textContent 和 innerText相同 （老IE不兼容 IE9 下）
常用方法
-
setAttribute();
-
getAttribute();
-
getBoundingClientRect() 返回一個對象屬性如下：但IE沒有width 和 height (可以通過兩個相減見得到) 兼容性很好 ** 但是不常用 **
-
left | top : 左上角坐標
-
bottom | right : 右下角坐標
-
windth | height 該元素寬高
-
x | y 貌似就是左上角一樣
~ 返回得結構為靜態快照並不會隨之改變，其坐標相對於視口
-
-
offsetWidth | offsetHeight ** 常用 ** 視覺上得尺寸
-
offsetLeft | offsetTop 求出相對於定位父元素的位置,如果沒有就是body元素
-
offsetParent 返回最近有定位的父元素沒有則為null