DOM對象
文檔對象模型（Document Object Model，簡稱DOM),是W3C組織推薦的處理可擴展標誌語言的標準編程接口。HTML DOM 定義了所有HTML 元素的對象和屬性，以及訪問它們的方法,也就是說HTML DOM 是一套標準規則:關於如何獲取、修改、添加或刪除
HTML 元的,Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問,DOM獨立於具體的編程語言,可以用於
任何語言，xml，js，vbs，c，java，php等等，DOM操作實際上就是增刪改查換element,text,attribute,comment(元素,文本,屬性,註釋)，或者說對頁面元素的增刪改查操作以及獲取，在JS中文檔對象用關鍵字document表示
document對象常見的屬性
lastModified 返回文檔被最後修改的日期和時間。
referrer 返回載入當前文檔的文檔的URL,如果當前文檔不是通過超鏈接訪問的，則爲空.(例:來到A頁面的方法:直接在地址欄中輸入A的地址,從B頁面左擊A的鏈接，跳轉至A頁面,從B頁面右擊點擊A的鏈接，在新窗口中打開,從B頁面右擊點擊A的鏈接，在新標籤頁中打開,拖動A的鏈接至地址欄,拖動A的鏈接至標籤欄,使用瀏覽器的前進、後退按鈕)// 拓展:這個屬性包含在消息報頭裏發送到服務器,可以用作判斷流量來源.
title 返回當前文檔的標題。
URL 返回當前文檔的 URL。
body 返回body節點對象
domain 可返回下載當前文檔的服務器域
cookie 設置或返回與當前文檔有關的所有緩存。
節點的獲取
在獲取節點時註釋也會當做節點，常用的有兩種，總共12種，
1、nextSibling：獲取指定節點的下一個兄弟節點， 獲取第一個ul的下一個兄弟節點，會將文本、空格、換行符都作爲文本處理
2、nodeName：獲取指定節點的節點名稱
3、nodeType:獲取指定節點的節點類型，返回值是number，1表示元素節點；3表示文本節點（#text），兼容問題：IE9、safari、chrome、firefox會將元素節點後面的換行部分作爲文本節點處理，可以通過nodeType查看類型
4、 nextElementSibling:獲取指定元素的的下一個兄弟元素，兼容問題：IE6、7、8不支持
// 兼容性判斷
if(uls[0].nextElementSibling){
uls[0].nextElementSibling;
}else{
uls[0].nextSibling;
if(uls[0].nextSibling.nodeType==1){
// 表示爲一個元素節點
}
}
5、previousSibling:獲取指定節點的上一個兄弟節點
6、previousElementSibling:獲取指定元素的上一個兄弟元素， 如果不存在相鄰的兄弟元素，那麼會返回null
7、lastchild：獲取最後一個子節點
8、lastElementChild：獲取最後一個子元素
9、firstChild:獲取第一個子節點
10、firstElementChild：獲取第一個子元素
11、childNodes:獲取所有的子節點,是一個節點集合，返回空數組（不存在時）
12、children:獲取所有的子元素節點，沒有兼容問題，強力推薦！！！
13、parentNode:獲取父節點，一定是一個元素節點
14、document.documentElement:獲取Html元素
15、document.body:獲取body元素
16、document.head:獲取head元素
17、hasChildNodes():判斷指定元素或節點是否存在子節點，返回布爾值，存在返回true不存在返回false
元素節點 Node.ELEMENT_NODE(1)
屬性節點 Node.ATTRIBUTE_NODE(2)
文本節點 Node.TEXT_NODE(3)
CDATA節點 Node.CDATA_SECTION_NODE(4)
實體引用名稱節點 Node.ENTRY_REFERENCE_NODE(5)
實體名稱節點 Node.ENTITY_NODE(6)
處理指令節點 Node.PROCESSING_INSTRUCTION_NODE(7)
註釋節點 Node.COMMENT_NODE(8)
文檔節點 Node.DOCUMENT_NODE(9)
文檔類型節點 Node.DOCUMENT_TYPE_NODE(10)
文檔片段節點 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD聲明節點 Node.NOTATION_NODE(12)
JS動態創建元素
createElement():創建指定類型的元素，需要一個參數，標籤類型的字符串
添加元素
1、將元素添加到指定元素，appendChild():添加到指定元素的最後一個子級的末尾，document.body.appendChild(div);
innerHTML可以爲指定元素添加子元素，但是必須以標籤字符串的形式賦值纔可以，如果不希望覆蓋之前的內容，就需要用+=賦值，document.body.innerHTML +="<div></div>";
2、將指定元素插入到指定元素的前面：
元素1.insertBefore(元素2,y元素3)(前面)、元素1.insertAfetr(元素2,y元素3)（後面）
元素1：元素2與元素3的父級
元素2：即將要插入的元素，元素2 如果已經存在於頁面，那麼會將它從原本的位置移動帶元素3前/後面
元素3：插入參照元素2
刪除元素
1、removeChild() 父級元素調用方法刪除子級元素
2、remove() 子級元素調用方法，將自己從父級刪除
3、innerHTML=""可以將指定元素所有子級元素刪除
修改元素
replaceChild(new,old) 需要由old元素的父級來調用，可以用new來替換old,被替換的元素會被刪除，元素位置的替換， 此方法有返回值會將被替換的元素返回
克隆元素
cloneNode(boolean); 當參數爲true時表示深克隆，false表示淺克隆
深克隆會將元素及內容都進行克隆，淺克隆只克隆元素，不會將內容克隆，克隆會將元素的屬性一併克隆過來
setAttribute removeAttribute getAttribute
setAttribute(屬性名,屬性值)增加或修改元素屬性值
getAttribute(屬性名)獲取元素屬性值，可以獲取元素的行間屬性以及我們爲元素添加的自定義屬性；而通過.語法不能獲取自定義屬性的值
removeAttribute(屬性名)刪除指定屬性的值
clo2.setAttribute("myType","clone");
console.log(clo2.getAttribute("myType"))
clo2.removeAttribute("myType");