什麼是DOM:
DOM ，全稱 Document Object Model
文檔對象模型。
JS中通過DOM來對HTML文檔進行操作。
只要理解了DOM就可以隨心所欲的操作WEB頁面。
文檔 文檔表示的就是整個的HTML網頁文檔。
對象 對象表示將網頁中的每一個部分都轉換爲了一個對象。
模型 使用模型來表示對象之間的關係，這樣方便我們獲取對象。
節點
節點Node ，是構成我們網頁的最基本的組成部分，網頁中的每一個部分都可以稱爲是一個節點。
比如：html標籤、屬性、文本、註釋、整個文檔等都是一個節點。
雖然都是節點，但是實際上他們的具體類型是不同的。
比如：標籤我們稱爲元素節點、屬性稱爲屬性節點、文本稱爲文本節點、文檔稱爲文檔節點。
節點的類型不同，屬性和方法也都不盡相同。
Node——構成HTML文檔最基本的單元。
常用節點分爲四類:
文檔節點 ：整個HTML文檔
元素節點 ：HTML文檔中的HTML標籤
屬性節點 ：元素的屬性
文本節點 ：HTML標籤中的文本內容
節點的屬性
| 節點 |
nodeName |
nodeType |
nodeValue |
| 文檔節點 |
document |
9 |
null |
| 元素節點 |
標籤名 |
1 |
null |
| 屬性節點 |
屬性名 |
2 |
屬性值 |
| 文本節點 |
#text |
3 |
文本內容 |
文檔節點（document）
文檔節點document ，代表的是整個HTML文檔，網頁中的所有節點都是它的子節點。
document對象作爲window對象的屬性存在的，我們不用獲取可以直接使用。
通過該對象我們可以在整個文檔內訪問查找節點對象，並可以通過該對象創建各種節點對象。
元素節點（Element）
HTML中的各種標籤都是元素節點，這也是我們最常用的一個節點。
瀏覽器會將頁面中所有的標籤都轉換爲一個元素節點，
我們可以通過document的方法來獲取元素節點。<br>比如：根據id屬性值獲取一個元素節點對象。
document.getElementById()
文本節點（Text）
文本節點表示的是HTML標籤以外的文本內容，任意非HTML的文本都是文本節點。
它包括可以字面解釋的純文本內容。
文本節點一般是作爲元素節點的子節點存在的。
獲取文本節點時，一般先要獲取元素節點。
再通過元素節點獲取文本節點。
例如：獲取元素節點的第一個子節點，一般爲文本節點
元素節點.firstChild;
屬性節點（Attr）
屬性節點表示的是標籤中的一個一個的屬性，
這裏要注意的是屬性節點並非是元素節點的子節點，而是元素節點的一部分。
可以通過元素節點來獲取指定的屬性節點。
例如：元素節點.getAttributeNode("屬性名");
注意：我們一般不使用屬性節點。
文檔的加載
瀏覽器在加載一個頁面時，是按照自上向下的順序加載的，讀取到一行就運行一行,
如果將script標籤寫到頁面的上邊，在代碼執行時，
頁面還沒有加載，DOM對象也沒有加載,會導致無法獲取到DOM對象。
onload事件會在整個頁面加載完成之後才觸發，爲window綁定一個onload事件，
該事件對應的響應函數將會在頁面加載完成之後執行，
這樣可以確保我們的代碼執行時所有的DOM對象已經加載完畢了。
將js代碼編寫到頁面的下部就是爲了可以在頁面加載完畢以後再執行js代碼。
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello");
};
};
獲取元素節點
通過document對象調用
getElementById() 通過id屬性獲取一個元素節點對象
getElementsByTagName() 通過標籤名獲取一組元素節點對象
getElementsByName() 通過name屬性獲取一組元素節點對象
獲取元素節點的子節點
通過具體的元素節點調用
getElementsByTagName()
方法 返回當前節點的指定標籤名後代節點
可以根據標籤名來獲取一組元素節點對象
這個方法會給我們返回一個類數組對象，
所有查詢到的元素都會封裝到對象中
即使查詢到的元素只有一個，也會封裝到數組中返回
childNodes
屬性 ，表示當前節點的所有子節點
childNodes屬性會獲取包括文本節點在內的所有節點
根據DOM標籤與標籤間空白也會當成文本節點
注意：在IE8及以下的瀏覽器中，不會將空白文本當成子節點
firstChild
屬性 ，表示當前節點的第一個子節點 （包括空白文本節點）
firstElementChild
獲取當前元素的第一個子元素
firstElementChild不支持IE8及以下的瀏覽器，如果需要兼容他們儘量不要使用
lastChild
屬性 ，表示當前節點的最後一個子節點
獲取父節點和兄弟節點
通過具體的節點調用
parentNode
屬性 ，表示當前節點的父節點
previousSibling
屬性 ，表示當前節點的前一個兄弟節點
previousElementSibling
獲取前一個兄弟元素，
IE8及以下不支持
nextSibling
屬性 ，表示當前節點的後一個兄弟節點
元素節點的屬性
獲取： 元素對象.屬性名
例: element.value
element.id
element.className
設置 ; 元素對象.屬性名 =新的值
例：element.value = “hello”
element.id = “id01”
element.className = “newClass”
其他屬性
nodeValue
文本節點可以通過nodeValue屬性獲取和設置文本節點的內容
innerHTML
元素節點通過該屬性獲取和設置標籤內部的html代碼
對於自結束標籤，這個屬性沒有意義，
如果需要讀取元素節點屬性，直接使用
元素.屬性名。
例子：
元素.id
元素.name
元素.value
注意：class屬性不能採用這種方式，
讀取class屬性時需要使用 元素.className
innerText
該屬性可以獲取到元素內部的文本內容，
它和innerHTML類似，不同的是它會自動將html去除
dom查詢的其他的方法
document.documentElement
保存的是html根標籤
document.all
代表頁面中所有的元素
getElementsByClassName()
根據元素的class屬性值查詢一組元素節點對象
可以根據class屬性值獲取一組元素節點對象，
但是該方法不支持IE8及以下的瀏覽器
使用CSS選擇器進行查詢
document.querySelector()
需要一個選擇器的字符串作爲參數，
可以根據一個CSS選擇器來查詢一個元素節點對象。
雖然IE8中沒有getElementsByClassName()
但是可以使用querySelector()代替
使用該方法總會返回唯一的一個元素，
如果滿足條件的元素有多個，那麼它只會返回第一個。
document.querySelectorAll()
該方法和querySelector()用法類似，
不同的是它會將符合條件的元素封裝到一個數組中返回
即使符合條件的元素只有一個，它也會返回數組
注意：
使用CSS選擇器進行查詢的方法是靜態方法
如果DOM結構發生改變，操作DOM時，需要重新獲取
dom增刪改
document.createElement()
可以用於創建一個元素節點對象，它需要一個標籤名作爲參數，
將會根據該標籤名創建元素節點對象，並將創建好的對象作爲返回值返回。
document.createTextNode()
可以用來創建一個文本節點對象，需要一個文本內容作爲參數，
將會根據該內容創建文本節點，並將新的節點返回
appendChild()
向一個父節點中添加一個新的子節點
語法：父節點.appendChild(子節點);
insertBefore()
可以在指定的子節點前插入新的子節點
語法：父節點.insertBefore(新節點,舊節點);
replaceChild()
可以使用指定的子節點替換已有的子節點
語法：父節點.replaceChild(新節點,舊節點);
removeChild()
可以刪除一個子節點
語法：
父節點.removeChild(子節點);
子節點.parentNode.removeChild(子節點);
使用innerHTML也可以完成DOM的增刪改的相關操作
一般我們會兩種方式結合使用
使用DOM操作CSS
通過JS修改元素的樣式：(修改的是內聯樣式)
語法：元素.style.樣式名 = 樣式值
注意：如果CSS的樣式名中含有-，
這種名稱在JS中是不合法的比如background-color
需要將這種樣式名修改爲駝峯命名法，去掉-，
然後將-後的字母大寫，backgroundColor
我們通過style屬性設置的樣式都是內聯樣式，
內聯樣式有較高的優先級，
所以通過JS修改的樣式往往會立即顯示。
但是如果在樣式中寫了!important，
則此時樣式會有最高的優先級，
即使通過JS也不能覆蓋該樣式，
此時將會導致JS修改樣式失效。
所以儘量不要爲樣式添加!important
讀取元素的樣式(兼容性問題)
currentStyle:
獲取元素的當前顯示的樣式
語法：元素.currentStyle.樣式名
它可以用來讀取當前元素正在顯示的樣式，
如果當前元素沒有設置該樣式，則獲取它的默認值
currentStyle只有IE瀏覽器支持，其他的瀏覽器都不支持
getComputedStyle()
在其他瀏覽器中可以使用getComputedStyle()這個方法
來獲取元素當前的樣式
這個方法是window的方法，可以直接使用
需要兩個參數:
第一個：要獲取樣式的元素
第二個：可以傳遞一個僞元素，一般都傳null
該方法會返回一個對象，對象中封裝了當前元素對應的樣式
可以通過對象.樣式名來讀取樣式
如果獲取的樣式沒有設置，則會獲取到真實的值，而不是默認值
比如：沒有設置width，它不會獲取到auto，而是一個長度
但是該方法不支持IE8及以下的瀏覽器
通過currentStyle和getComputedStyle()讀取到的樣式都是隻讀的，
不能修改，如果要修改必須通過style屬性
// 讀取元素的樣式(兼容方式代碼)
/*
* 定義一個函數，用來獲取指定元素的當前的樣式
* 參數：
* el: 要獲取樣式的元素
* name: 要獲取的樣式名
*/
function getStyle(el , name){
if(window.getComputedStyle){
// 正常瀏覽器的方式，具有getComputedStyle()方法
return getComputedStyle(el , null)[name];
}else{
// IE8的方式，沒有getComputedStyle()方法
return el.currentStyle[name];
}
// return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
其他樣式操作的屬性
clientWidth
clientHeight
這兩個屬性可以獲取元素的可見寬度和高度
這些屬性都是不帶px的，返回都是一個數字，可以直接進行計算
會獲取元素寬度和高度，包括內容區和內邊距
這些屬性都是隻讀的，不能修改
offsetWidth
offsetHeight
獲取元素的整個的寬度和高度，
包括內容區、內邊距和邊框
offsetParent
可以用來獲取當前元素的定位父元素
會獲取到離當前元素最近的開啓了定位的祖先元素
如果所有的祖先元素都沒有開啓定位，則返回body
offsetLeft
當前元素相對於其定位父元素的水平偏移量
offsetTop
當前元素相對於其定位父元素的垂直偏移量
scrollWidth
scrollHeight
可以獲取元素整個滾動區域的寬度和高度
scrollLeft
可以獲取水平滾動條滾動的距離
scrollTop
可以獲取垂直滾動條滾動的距離
當滿足
scrollHeight - scrollTop == clientHeight
說明垂直滾動條滾動到底了
當滿足
scrollWidth - scrollLeft == clientWidth
說明水平滾動條滾動到底
定時器
定時調用
JS的程序的執行速度是非常非常快的，如果希望一段程序，
可以每間隔一段時間執行一次，可以使用定時調用。
setInterval()
定時調用，可以將一個函數，每隔一段時間執行一次
參數：
1.回調函數，該函數會每隔一段時間被調用一次
2.每次調用間隔的時間，單位是毫秒
返回值：
返回一個Number類型的數據；
這個數字用來作爲定時器的唯一標識
clearInterval()
可以用來關閉一個定時器；
該方法中需要一個定時器的標識作爲參數，
這樣將關閉標識對應的定時器；
clearInterval()可以接收任意參數，
如果參數是一個有效的定時器的標識，
則停止對應的定時器，
如果參數不是一個有效的標識，則什麼也不做。
// clearInterval(timer);
延時調用
setTimeout(）
延時調用一個函數不會馬上執行，而是隔一段時間以後再執行，而且只會執行一次；
延時調用和定時調用的區別，定時調用會執行多次，而延時調用只會執行一次；
延時調用和定時調用實際上是可以互相代替的，在開發中可以根據自己需要去選擇
使用clearTimeout()來關閉一個延時調用
var timer = setTimeout(function(){
console.log(num++);
},3000);
//使用clearTimeout()來關閉一個延時調用
clearTimeout(timer);
