文檔：一個頁面就是一個文檔。
元素：頁面中所有的標簽都是元素，也可以叫對象。
節(jié)點：頁面中所有的內(nèi)容都是節(jié)點，標簽，屬性，文本。
在JS中操作dom，設(shè)置css樣式時，樣式的名稱如background-color，在js中一律用駝峰寫法，backgroundColor
通過JS設(shè)置元素行內(nèi)樣式，操作style屬性即可
通過JS設(shè)置元素的類樣式，不用class關(guān)鍵字，應(yīng)使用className
a 標簽點擊事件有默認的跳轉(zhuǎn)，想要阻止默認的跳轉(zhuǎn)，在點擊事件函數(shù)的最后return false；
若點擊事件函數(shù)中有多條語句執(zhí)行，封裝成函數(shù)的形式，應(yīng)將函數(shù)返回，才能阻止a的默認跳轉(zhuǎn)。
JS中的事件：onclick，onmouseover，onmouseout，onfocus，onblur等等。
原生JS選擇器：
document.getElementById(),
document.getElementsByClassName(),
document.getElementsByTagName().
document.getElementsByName()
H5選擇器：
document.querySelector(),
document.querySelectorAll()
TextContent與innerText
IE8不支持：textContent
InnerText和innerHTML
InnerText設(shè)置：按純文本的方式解析內(nèi)容，innerHTML設(shè)置：按html的方式解析內(nèi)容
InnerText獲取：不僅能獲得當(dāng)前元素的內(nèi)容，還能獲取子元素中的文本內(nèi)容。
InnerHTML獲取：同樣能獲取到子元素，但包含了子元素的標簽
結(jié)果：
獲取/設(shè)置/刪除自定義(自帶屬性)屬性：getAttribute()/setAttribute()/removeAttibute()
Tab的實現(xiàn)，
節(jié)點分為：標簽節(jié)點，屬性節(jié)點，文本節(jié)點
節(jié)點的屬性：
nodeType：取值（1，2，3）
1代表標簽，2代表標簽的屬性，3代表文本內(nèi)容
nodeName：標簽節(jié)點的nodeName是大寫的標簽名字，屬性節(jié)點的nodeName是小寫的屬性名字，文本節(jié)點的nodeName是#text
nodeValue：標簽節(jié)點的的nodeValue是null，屬性節(jié)點的nodeValue是屬性值，文本節(jié)點的nodeValue是文本內(nèi)容
獲取標簽的父節(jié)點/父元素？
parentNode/parentElement
-------------------------------------------------------
獲取子節(jié)點/子元素
ChildNodes/children
Nodelist中有9個節(jié)點的原因在于文本是節(jié)點，空白文本也是節(jié)點，一般可以認為：
子節(jié)點的個數(shù) = 子元素的個數(shù) * 2 +1（9 = 4*2+1）
如何獲取屬性屬性節(jié)點？
GetAttributeNode()
對應(yīng)div中id這個屬性節(jié)點來說，它的nodeType=2,nodeName=屬性id，nodeValue屬性值box4，基本上用不上。了解即可。
從這里開始的代碼，在IE8中存在問題,以下代碼是運行再chrome瀏覽器中的效果。
獲取第一個子節(jié)點/第一個子元素
FirstChild/firstElementChild
在IE8中（FirstChild代表著第一個子元素，firstElementChild無法識別undefined）
--------------------------------------------------
同理，獲取最后一個子節(jié)點/最后一個子元素
LastChild/lastElementChild
在IE8中（lastChild代表著最后一個子元素，lastElementChild無法識別undefined）
---------------------------------
獲取某個元素的前一個兄弟節(jié)點/前一個兄弟元素
PreviousSibling/previousElementSibling
在IE8中（PreviousSibling代表前一個兄弟元素，previousElementSibling無法識別undefined）
--------------------------------------
同理，獲取某個元素的后一個兄弟節(jié)點/后一個兄弟元素
NextSibling/nextElementSibling
在IE8中（NextSibling代表著后一個兄弟元素，nextElementSibling無法識別undefined）
封裝節(jié)點操作的兼容代碼
獲取任意元素的第一個子元素
同理獲取任意元素的最后一個子元素
創(chuàng)建元素的方式
Document.write(()在頁面加載完成時，向body中寫入內(nèi)容，會將body，head中的所有內(nèi)容清空后，插入當(dāng)前內(nèi)容。
當(dāng)事件觸發(fā)時執(zhí)行document.write()，意味著頁面加載完成，當(dāng)點擊按鈕時，頁面中其他內(nèi)容都會被清空。
-------------------------------------
使用innerHTML向標簽內(nèi)添加內(nèi)容，同樣會覆蓋當(dāng)前標簽的內(nèi)容，如果反復(fù)點擊按鈕添加元素，會導(dǎo)致反復(fù)的賦值，也就是反復(fù)的覆蓋之前插入的同樣內(nèi)容的標簽
點擊按鈕前
點擊按鈕后
-------------------------------
Document.createElment()創(chuàng)建元素，通過點擊按鈕會，反復(fù)的創(chuàng)建元素對象，然后通過appendChild（）向后追加，插入到目標容器中。
點擊按鈕前：
點擊按鈕后：
反復(fù)點擊：
應(yīng)該避免反復(fù)點擊，創(chuàng)建預(yù)期之外的元素。
另外循環(huán)中不要寫匿名函數(shù)，這樣效率會很低。
將標簽追加到目標容器中的方法
AppendChild():向后追加
InsertBefore(a,b) 把a插入到b的前面
首先是要插入到$$(‘box’)標簽對象的內(nèi)的，但具體在位置，由后面兩個參數(shù)確定，
Pobj是創(chuàng)建的p元素，p元素插入到$$(‘box4’)標簽對象的第一個子元素前面。
點擊按鈕前：
點擊按鈕后：
移除當(dāng)前元素中的子元素
A.RemoveChild（B），含義中：從A中刪除子元素B
如何控制無論按鈕點擊多少次，都只創(chuàng)建一次呢？
有則刪除，無則創(chuàng)建！
第一次點擊按鈕的時候，元素創(chuàng)建并且插入了，第二次的時候，通過id可以找到之前插入的元素，那么就刪除，然后再創(chuàng)建，插入，以此類推。著從頁面上看，無論按鈕點擊多少次，都只會有一個元素。
事件的綁定：當(dāng)為同一個元素多次綁定同一事件，則最后一次事件綁定生效。
結(jié)果：
那么如何讓綁定的onclick事件都生效呢？
其實，還有其他綁定事件的方式：addEventListener()
參數(shù)1：事件名稱，沒有on，點擊事件就是click
參數(shù)2：回調(diào)函數(shù)
參數(shù)3：布爾類型，
結(jié)果：
通過這種方法，為同一事件綁定，每次綁定的事件都會觸發(fā)，不會被覆蓋，但是兼容性存在問題。（IE8不支持。）
為了解決IE8兼容性的問題，使用AttachEvent()
參數(shù)1：事件的類型，如點擊事件，onclick
參數(shù)2：回調(diào)函數(shù)（可以是命名函數(shù)）
封裝兼容性事件函數(shù)：為任意元素，綁定任意事件
-----------------------------------------------------------
在chrome下，addEventListener兼容，this的值是綁定事件的dom對象
-------------------------------------------------------------
在IE8下，attacheEvent兼容，this的值是window
為元素解除事件綁定
當(dāng)使用onclick 綁定事件時，清除事件只要將onclick指向null。
--------------------------------------------------------------------------------
當(dāng)使用addEventListener為元素添加多個相同事件，應(yīng)該命名函數(shù)作為事件處理函數(shù)，便與在使用removeEventListener移除事件，方便移除具體的事件處理函數(shù)。
----------------------------------------------------------------------
同理，IE8下添加事件和解綁事件
封裝對應(yīng)的解綁事件的函數(shù)
事件冒泡
多個元素嵌套，由層級關(guān)系，綁定了相同的事件類型，當(dāng)內(nèi)部的元素出發(fā)事件，外面的元素也會出發(fā)事件。
當(dāng)點擊box1時：
當(dāng)點擊box2時：
當(dāng)點擊box3時：
如果都綁定了相同的事件，但是它們的事件處理函數(shù)可以完全不通，不能因為觸發(fā)子元素事件的同時，由于事件冒泡，也觸發(fā)到外層元素的事件。你可能只想干一件事，可是，由于事件冒泡卻多做了幾件事，這樣反倒會畫蛇添足。
如何阻止事件冒泡？
Window.event.cancelBubble = true,火狐瀏覽器不支持。Window.event是ie中標準事件對象
e.stopPropagation() IE8不支持這個函數(shù)，且IE8中沒有事件處理的默認參數(shù)，在其他瀏覽器中是有e這個事件處理的默認參數(shù)的。E是火狐的標準事件對象
Box1點擊時：
Box2點擊時：
Box3點擊時：
事件有三個階段：事件捕獲階段，事件目標階段，事件冒泡階段
對于addEventListener()的第三個參數(shù)而言，在值是false情況下，事件處理函數(shù)的觸發(fā)按照事件冒泡來觸發(fā)，而在值等于true的情況下，事件處理函數(shù)的觸發(fā)按照事件捕獲階段觸發(fā)，事件捕獲與事件冒泡過程相反。事件冒泡是從內(nèi)向外觸發(fā)事件函數(shù)，而事件捕獲是從外向內(nèi)觸發(fā)事件函數(shù)。即addEventListener()的第三個參數(shù)是控制事件階段（控制觸發(fā)函數(shù)的過程）
一般綁定事件，默認都是設(shè)置成事件冒泡階段，很少設(shè)置成捕獲階段。
---------------------------------------------------
Bom
瀏覽器中的頂級對象是window
頁面中的頂級對象是document
在全局環(huán)境下，也就是js的文件中，用var定義的變量，默認是掛在window對象上的
----------------------------------------------------------------
頁面加載事件
Window.onload :當(dāng)頁面上所有的標簽，屬性，文本，外部引用加載完成時，才會觸發(fā)。
在IE8中：
Window.onunload 頁面關(guān)閉后觸發(fā)事件
Window.onbeforeunload 頁面關(guān)閉前觸發(fā)函數(shù)
Location對象
Location.href = ‘’ 跳轉(zhuǎn)到指定的網(wǎng)頁
Location.assign() 挑戰(zhàn)到指定的網(wǎng)頁
Location.reload() 重新加載頁面，相當(dāng)于刷新
Location.replace() 跳轉(zhuǎn)到新的頁面，不能回到初始頁面
History 對象
History.back()
History.forward()
History.go()
Navigator對象
UserAgent 通過userAgent可以判斷瀏覽器類型
Platform 通過platform可以判斷瀏覽器所在的系統(tǒng)平臺
------------------------------------------------------------------
定時器、
Id = Window.setInterval() :設(shè)置一個定時器。
Window.clearInterval(id) 清除定時器。
點擊按鈕前，每秒鐘獲取當(dāng)前的時間
點擊按鈕后：停止。
----------------------------------------------------
SetTimeout() :設(shè)置一次性的定時器
clearTimeout()：清除定時器所占用的內(nèi)存空間
1秒中之后，獲取當(dāng)前時間，輸出。只執(zhí)行一次。即使只執(zhí)行一次，也需要清理所占用的內(nèi)存空間。
