什么是DOM？
DOM 中的三個字母，D（文檔）可以理解為整個 Web 加載的網(wǎng)頁文檔；O（對象）可以理解為類似 window 對象之類的東西，可以調(diào)用屬性和方法，這里我們說的是 document對象；M（模型）可以理解為網(wǎng)頁文檔的樹型結(jié)構(gòu)。
DOM 有三個等級，分別是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成為W3C 標準。
DOM節(jié)點
節(jié)點：加載 HTML 頁面時，Web 瀏覽器生成一個樹型結(jié)構(gòu)，用來表示頁面內(nèi)部結(jié)構(gòu)。DOM 將這種樹型結(jié)構(gòu)理解為由節(jié)點組成
節(jié)點種類：元素節(jié)點、文本節(jié)點、屬性節(jié)點
DOM節(jié)點獲取
getElementById()??? 獲取特定 ID 元素的節(jié)點
注意問題：window.onload
元素節(jié)點 屬性：tagName?????? innerHTML
HTML屬性的屬性：id????? title??? style???? className
getElementsByTagName()??? 獲取相同元素的節(jié)點列表
document.getElementsByTagName('*'); //獲取所有元素
document.getElementsByTagName(‘*’).length
getElementsByName()????? 獲取相同名稱的節(jié)點列表
document.getElementsByName('add') //獲取 input 元素
document.getElementsByName('add')[0].value //獲取 input 元素的 value 值
document.getElementsByName('add')[0].checked//獲取 input 元素的 checked 值
getAttribute(名稱)??? 獲取特定元素節(jié)點屬性的值
setAttribute(名稱，值)??? 設(shè)置特定元素節(jié)點屬性的值
removeAttribute(名稱) 移除特定元素節(jié)點屬性
子節(jié)點：只取第一層
childNodes????? 例：oUl.childNodes????????????????
兼容性問題:? FF空的文本節(jié)點也算作一個節(jié)點?? IE：空的不算
解決方法：
?nodeType：節(jié)點類型??? 例：body.childNodes[0].nodeType
?返回值：1為元素節(jié)點????? 3為文本節(jié)點
Children??? 例：oUl.children
?IE\FF\谷歌都兼容
父節(jié)點：只有一個
parentNode 結(jié)構(gòu)上的父級元素??????? 例：oLi.parentNode
offsetParent 定位上的父級元素??????? 例：oLi.offsetParent
首尾節(jié)點（有兼容性問題）
firstChild\firstElementChild 第一個子節(jié)點???????
例：oFirst=oUl.firstElementChild || oUl.firstChild
lastChild\lastElementChild? 最后一個子節(jié)點???????
例：oLast=oUl.lastElementChild || oUl.lastChild
兄弟節(jié)點（有兼容性問題）
nextSibling\nextElementSibling? 下一個節(jié)點???????
例：oNext=oUl. nextElementSibling || oUl.nextSibling
previousSibling\previousElementSibling? 上一個節(jié)點?????
例：oPrevious=oUl. previousElementSibling || oUl. previousSibling
createElement() 創(chuàng)建一個元素節(jié)點
document.createElement('p'); //創(chuàng)建一個元素節(jié)點
createTextNode() 創(chuàng)建一個文本節(jié)點
var text = document.createTextNode('段落'); //創(chuàng)建一個文本節(jié)點
p.appendChild(text); //將文本節(jié)點添加到子節(jié)點末尾
appendChild() 將新節(jié)點追加到子節(jié)點列表的末尾
appendChild()方法講一個新節(jié)點添加到某個節(jié)點的子節(jié)點列表的末尾上。
var box = document.getElementById('box'); //獲取某一個元素節(jié)點
var p = document.createElement('p'); //創(chuàng)建一個新元素節(jié)點<p>
box.appendChild(p); //把新元素節(jié)點<p>添加子節(jié)點末尾
insertBefore() 將新節(jié)點插入在前面
box.parentNode.insertBefore(p, box); //在box(div)之前創(chuàng)建一個節(jié)點
replaceChild() 將新節(jié)點替換舊節(jié)點
var p=document.createElement('p');
box.parentNode.replaceChild(p,box); //把<div>換成了<p>
cloneNode() 復制節(jié)點
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); //獲取第一個子節(jié)點，?????? true 表示復制內(nèi)容
box.appendChild(clone); //添加到子節(jié)點列表末尾
removeChild() 移除節(jié)點
box.parentNode.removeChild(box); //刪除指定節(jié)點
文檔碎片可以提高DOM操作性能(理論上)
文檔碎片原理
??? document.createDocumentFragment()
