事件
事件就是用戶和瀏覽器之間的交互行爲 ，比如：點擊按鈕、鼠標移動、關閉窗口等等。
我們可以再事件對應的屬性中設置一些JS代碼，這樣當事件被觸發時，這些代碼將會執行，這種寫法我們稱爲結構和行爲耦合，不方便使用，不推薦使用。
<button id = "btn" onmousemove = "alert('點我幹嘛！！！');">我是一個按鈕</button>
文檔的加載
瀏覽器在加載一個頁面時，是按照自上向下的順序加載的，讀取到一行就運行一行，如果將script標籤寫到頁面的上邊，在代碼執行時，頁面還沒有加載，DOM對象也沒有加載，會導致無法獲取到DOM對象。
onload事件會在整個頁面加載完成之後才觸發，爲window綁定一個onload事件，該事件對應的響應函數將會在頁面加載完成之後執行，這樣可以確保我們的代碼執行時所有的DOm對象已經加載完畢了。
window.onload =function(){
//獲取id爲btn的按鈕
var btn =document.getElementById("btn");
//爲按鈕綁定單擊響應函數
btn.onclick = function(){
alert("hello");
};
};
DOM查詢
注:常用的相關操作會特殊標記
通過document對象調用
1.getElementByID()
通過id屬性獲取一個元素節點對象
2.getElementsByTagName()
通過標籤名獲取一組元素節點對象，這個方法會給我們返回一個類數組對象，所有查詢到的元素都會封裝到對象中，即使查詢到的元素只有一個，也會封裝到數組中返回。
3.getElementsByName()
通過name屬性獲取一組元素節點對象
4.innerHTML
通過這個屬性可以獲取到元素內部的html代碼，對於自結束標籤，這個屬性沒有意義。如果需要讀取元素及節點的屬性，直接使用元素.屬性名，例子： 元素.id 元素.name 元素.value。 注意： 讀取class屬性是需要使用 元素.className
通過具體的元素節點調用
1.getElementByTagName（）
方法，返回當前節點的指定標籤名後代節點
2.childNodes
屬性，表示當前節點的所有子節點，會獲取包括文本節點在內的所有節點。根據DOM標準，標籤間的空白也會當成文本節點。注意：在IE8及以下的瀏覽器中，不會將空白當成子節點。
3.firstChild
屬性，表示當前節點的第一個子節點（包括空白文節點）
4.firstElementChild
獲取當前元素的第一個子元素（不建議使用，不支持IE8及以下的瀏覽器）
5.lastChild
屬性，表示當前節點的最後一個子節點
6.parentNode
屬性，表示當前節點的父節點
7.previousSibling
屬性，表示當前節點額前一個兄弟節點（也可能獲取到空白的文本）
8.previousElementSibling
獲取前一個兄弟元素，IE8及以下不支持
9.nextSibling
屬性，表示當前節點的後一個兄弟節點
10.innerText
該屬性可以獲取到元素內部的文本內容，他和innerHTML類似，不同的是它會自動將HTML標籤去除
11.document.body
在document中有一個屬性body，他保存的是body的引用
12.document.documentElement
保存的是html根標籤
13.document.all
代表頁面中所有的元素
14.getElementByClassName（）
根據元素的clas屬性值查詢一組元素節點對象，但是該方法不支持IE8及以下瀏覽器
15.document.querySelector（）
需要一個選擇器的字符串作爲參數，可以根據一個CSS選擇器來查詢一個元素節點對象，雖然IE8中沒有getElementsByName（），但是我們可以使用querySelector（）代替，使用該方法總會返回唯一的一個元素，如果滿足條件的元素有多個，那麼他只會返回第一個
16.document.querySelectorAll
該方法和querySelector（）用法類似，不同的是它會將符合條件的元素封裝到一個數組中返回，即使符合條件的元素只有一個，他也會返回數組
DOM增刪改
1.document.createElement（）
可以用於創建一個元素節點對象，它需要一個元素節點對象，將會根據標籤名創建元素節點對象，並將創建好的對象作爲返回值返回。
2.document.createTextNode（）
可以用來創建一個文本節點對象，需要一個文本內容作爲參數，將會根據該內容創建文本節點，並將新的節點返回。
3.appendChild（）
向一個父節點中添加一個新的節點，用法： 父節點.appendChild（子節點）；
4.insertBefore（）
可以在指定的子節點前插入新的子節點。 用法： 父節點.insertBefore（新節點，舊節點）；
5.replacedChild（）
可以使用指定的子節點替換已有的子節點 。 語法 ： 父節點.repalceChild（新節點，舊節點）；
6.removeChild（）
可以刪除一個子節點， 語法 ： 父節點.removerChild（子節點）
使用DOM操作CSS
1.通過JS修改元素的樣式：
語法： 元素.style.樣式名 =樣式值
我們通過style屬性設置的樣式都是內聯樣式，而內聯樣式有較高的優先級，所以通過JS修改的樣式往往會立即顯示，但是如果在樣式中寫了！important，則此時樣式會有最高的優先級，即使通過JS也不能覆蓋該樣式，此時將會導致JS修改樣式失效，所以儘量不要爲樣式添加！important
注意：如果CSS的樣式中含有 - ，需要將這種樣式名修改爲駝峯命名法。這種名稱在JS中是不合法的，比如：background-color，去掉 - ，然後將 - 後的字母大寫，例如：bacground-color 改爲 backgroundColor
2.1獲取當前顯示的樣式
語法： 元素.currentStyle.樣式名
他可以用來讀取當前元素正在顯示的樣式
注意：currentStyle只有IE瀏覽器支持，其他的瀏覽器都不支持
2.2在其他瀏覽器中可以使用
getComputedStyle() 這個方法來獲取元素當前的樣式
這個方法是window的方法，可以直接使用
需要兩個參數
第一個： 要獲取樣式的元素
第二個：可以傳遞一個僞元素，一般都傳null
該方法會返回一個對象，對象中封裝了當前元素對應的樣式，可以通過對象.樣式名來讀取樣式
如果獲取的樣式沒有設置，則會讀取到真實的值，而不是默認值。比如，沒有設置width，他不會獲取到auto，而是一個長度
DOM其他樣式操作的屬性
1.clientWidth/clientHeight
這兩個屬性可以獲取元素的可見寬度和高度，這些屬性都是不帶px的，返回的都是一個數字，可以直接進行計算，會獲取元素寬度和高度，包括內容區和內邊距，這些屬性都是隻讀的，不能修改
2.offsetWidth/offsetHeight
獲取元素的整個寬度個高度，包括內容區、內邊距和邊框
3.offsetParent
可以用來獲取當前元素的定位父元素，會獲取當離當前元素最近的開啓了定位的祖先元素，如果所有的祖先元素都沒有開啓定位，則返回body。
4.offsetLeft / offsetTop
獲取當前元素相對於其定位父元素的水平（垂直）偏移量
5.scrollWidth / scrollHeight
可以獲取元素整個滾動區域的寬度和高度
6.scrollLeft / scrollTop
可以獲取水平（垂直）滾動條滾動的距離
當滿足scrollHeight - scrolltop == clientHeight ，說明滾動到底了！！！！