事件基礎
事件是有三部分組成，事件源，事件類型，事件處理程序，我們也稱爲事件三要素
-
事件源：事件被觸發的對象，誰 按鈕
var btn = document.getElementById('btn'); -
事件類型：如何觸發，發生事件，比如鼠標點擊，還是鼠標經過，還是按下鍵盤
onclick：鼠標點擊 onmouserover：鼠標經過觸發 onmouseout：鼠標離開觸發 onfocus：獲得鼠標焦點觸發 onblur：失去鼠標焦點觸發 onmousemove：鼠標移動觸發 onmouseup：鼠標彈起觸發 onmousedown：鼠標按下觸發 -
事件處理程序：通過一個函數賦值的方式，完成。
btn.onclick = function(){ alert('唐伯虎點秋香'); }
操作元素
-
改變元素內容/讀取內容
element.innerText:從起始位置到終止位置的內容，但他去除html標籤，同事空格和換行也會去掉，不識別html標籤 讀取時候會將裏面的空格和換行去掉 element.innerHTML:起始位置到終止位置的全部內容，包括html標籤，同事保留空格和換行，識別html標籤（w3c推薦的標籤）讀取時候會將裏面的空格和換行讀取 -
獲取屬性值
1.element.屬性 ： 獲取屬性值 2.element.getAttribute('屬性') 區別：element.屬性 是獲取內置屬性值（元素本身自帶的屬性） element.getAttribute('屬性') 主要獲取自定義的屬性（標準）可以獲取我們程序員自定義的屬性 -
設置屬性值
1、element.屬性 = '值' 設置內置屬性值 2、element.getAttribute('屬性', ’值') 兩者區別同上。 -
移除屬性
element.removeAttribute('屬性') -
H5自定義屬性規定，一般以data-開頭
H5獲取屬性的方法：element.dataset.名稱 （只能獲取以data-開頭的自定義屬性，並且獲取時只需要data- 後面的名稱
節點概述
一般的，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性
元素節點 nodeType 爲 1 （例如：html標籤）
屬性節點 nodeType 爲 2 （例如：class id等）
文本節點 nodeType 爲 3 （文本節點包含文字、空格、換行等）
注意：我們一般節點操作主要操作的是元素節點
父節點
node.parentNode 得到的是離元素最近的父級節點，如果得不到則返回爲null
子節點
parentNode.chlidNodes 標準用法 得到所有的子節點，包含文本節點和元素節點等等
注意：如果只想要獲取裏面的元素節點，則需要專門處理，所以我們一般不提倡使用chlidNodes
處理如下：
var ul = document.querySelector('ul');
for(var i = 0; i <= ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == 1){
//ul.childNodes[i]是元素節點
console.log(ul.childNodes[i]);
}
}
parentNode.children 非標準，獲取所有的子元素節點（實際開發常用的）
parentNode.firstChild 獲取元素的第一個子節點，找不到則返回null 不管是元素節點還是文本節點
parentNode.firstElementChild 獲取元素的第一個子元素節點 （注意：只有ie9以上才能用）
實際開發中用：parentNode.children[0]
parentNode.lastChild 獲取元素的最後一個子節點，找不到則返回null 不管是元素節點還是文本節點
parentNode.lastElementChild 獲取元素的第一個子元素節點 （注意：只有ie9以上才能用）
兄弟節點
node.nextSibling 返回當前元素的下一個兄弟節點 找不到則返回null 如果下一個兄弟是文本節點也能得到
node.nextElementSibling 返回當前元素的下一個兄弟元素節點 （注意：只有ie9以上才能用）
node.previousSibling 返回當前元素的上一個兄弟節點 找不到則返回null 如果上一個兄弟是文本節點也能得到
node.previousElementSibling 返回當前元素的上一個兄弟元素節點 （注意：只有ie9以上才能用）
自己封裝一個兼容性的函數：
function getNextElementSibling(element){
var el = element;
while(el = el.nextSibling){
if(el.nodeType === 1){
return el;
}
}
return null;
}
創建節點
document.createElement('tagName') 該方法創建由tagName指定的HTML元素。因爲這些元素原先不存在，是根據我們的需求動態生成的，所以我們也稱爲動態創建元素節點
添加節點
node.appendChild(child) 該方法將一個節點添加到指定父節點的子節點列表末尾，類似於CSS裏面的after僞元素，其中node是父級，child是子級
node.insertBefore(child,指定元素) 該方法將一個節點添加到父節點的指定子節點前面，其中node是父級，child是子級
注意：所以頁面中想要添加元素我們分兩步：
1.需要創建元素 2.添加元素
刪除節點
node.removeChild(child) 該方法從DOM中刪除一個子節點，返回刪除的節點 node是父節點 child是子節點
複製節點
node.cloneNode() 該方法返回調用該方法的節點的一個副本，也稱爲克隆或者拷貝，克隆後還需要使用添加方法才能頁面顯示
注意：
1、如果括號內參數爲空或者爲false，則是淺拷貝，即只克隆複製節點本身，不克隆裏面的子節點
2、如果括號參數爲true，則是深度拷貝，會複製節點本身以及裏面的所有子節點
三種動態創建元素的區別
document.write() 是直接將內容寫入頁面的內容流，但是當頁面執行完成後，再執行這個方法時他會將頁面全部重新書寫，也就是隻顯示document.write() 的內容
innerHTML 是將內容寫入某個DOM節點，不會導致頁面全部重繪
innerHTML 創建多個元素效率更高（前提是不採取拼接字符串的形式，要採用數組push，然後數組join 形式），結構稍微複雜
createElement() 創建多個元素效率稍微低一點點，但是結構更加清晰
總結：不同瀏覽器下innerHTML效率要比createElement要高
``