添加元素的其他方式
注意
通過 父元素DOM對象.appendChild(元素), 將創建好的元素添加到了父元素中的末尾。
insertBefore
語法：
父DOM對象.insertBefore(新節點,舊節點);
參數介紹：
1. 第一個參數表示的就是要在父容器中添加的新元素
2. 第二個參數表示的是要將新元素添加到哪個元素之前（目標元素）
cloneNode(true|false)
語法：
DOM對象.cloneNode(boolean);
參數介紹：
1. 參數是一個布爾類型的參數
2. 如果參數是false，只克隆標籤本身，不包括標籤中的內容
3. 如果參數是true，不僅要克隆標籤本身，還包括標籤中的所有內容
replaceChild
語法：
父DOM對象.replaceChild(新節點,舊節點);
參數介紹：
1. 第一個參數代表的是新節點（元素）
2. 第二個參數代表的是被替換的節點（元素）
oninput事件
事件特點：
當用戶在輸入的時候，就會觸發該事件。
註冊事件
on方式註冊事件
語法：
DOM對象.on事件名稱 = function() {
};
特點：
1. 如果給元素註冊的事件是相同的事件，那麼後面的事件會將前面的事件覆蓋掉
addEventListener方式註冊事件
語法：
DOM對象.addEventListener('事件名', function(){});
特點：
1. 通過addEventListener可以給元素註冊多個事件
2. 如果註冊的事件名字相同，不會發生事件覆蓋的問題。
attachEvent方式註冊事件（解決IE8以上瀏覽器兼容問題）
語法：
DOM對象.attachEvent('on+事件名', function(){});
特點：
1. 該方式可以給元素註冊多個事件
2. 該方法只適合在IE瀏覽器環境下使用 【瞭解】
移除事件
移除通過on方式註冊的事件
語法：
DOM對象.on事件名 = null;
總結：
1. 該種移除事件的方式，僅限在註冊事件的時候就使用的是 on 方式
移除通過addEventListener註冊的事件
語法：
DOM對象.removeEventListener('事件名', 函數名)
特點：
1. 要通過removeEventListener移除事件時候，要通過函數名的方式移除
2. 必須保證在註冊事件的時候，處理程序就得是命名函數
3. 例如：
div.addEventListener('click', fn);
function fn() {
alert(1);
}
div.removeEventListener('click', fn);
移除通過attachEvent註冊的事件【兼容IE低版本】
語法：
DOM對象.detachEvent('事件名', 函數名);
特點：
1. 使用detachEvent移除事件時候，要通過函數名移除（註冊的時候需要是命名函數）
2. 使用detachEvent移除事件的時候，方式與removeEventListener一樣
3. detachEvent移除事件的時候，事件名稱前需要加 'on'
事件流
組成
1. 事件捕獲 : 事件從外向內傳遞執行
2. 事件執行： 開始執行事件中的代碼
3. 事件冒泡： 事件從內向外傳遞執行
委託思想
委託思想：
1. 可以將自己完成的事情（事件）交給父元素完成 [冒泡和捕獲]
2. 通過事件對象參數獲取具體的值
事件對象參數：
1. 本質上就是參數
2. 事件對象參數是保存，事件執行過程中產生的數據（值）
3. 例如
ul.onclick = function(e) {
console.log(e.target.innerText);
}
4. 事件對象參數就是一個對象
事件對象參數
e.target: 得到的就是當前點擊的具體的那個對象
e.clientX: 鼠標點擊位置相對可視區域左上角的橫座標
e.clientY： 鼠標點擊位置相對可視區域左上角的縱座標
e.offsetX: 鼠標點擊位置相對當前事件源左上角橫座標
e.offsetY： 鼠標點擊位置相對當前事件源左上角縱座標
e.pageX: 鼠標點擊位置相對於整個頁面（包括滾動條出去的位置）【非標準屬性】
e.pageY: 鼠標點擊位置相對於整個頁面
e.screenX: 鼠標點擊位置相對整個瀏覽器的橫座標
e.screenY: 鼠標點擊位置相對整個瀏覽器的縱座標
e.stopPropagation();
例如：
var divs = document.querySelectorAll('div');
for(var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', function(e) {
console.log(this.className);
e.stopPropagation();
})
}
鼠標移動事件
onmousemove
事件：onmousemove
鼠標移動的時候就會觸發該事件。
注意：
1. 在修改元素位置的時候,一般是將元素先設置爲絕對定位
鍵盤事件
onkeydown
當前鍵盤上任意的一個鍵被按下去，會觸發onkeydown事件
onkeyup
當前鍵盤上的任何一個鍵擡起時候，觸發onkeyup事件
onkeypress
當前鍵盤上任意的一個鍵被按下去，觸發onkeypress
特點：
1. 鍵盤上的一些功能鍵無法獲取（方向鍵， alt， ctrl）
鍵盤事件對象參數
e.key | e.code ----> 鍵的名字（字符串）
e.keyCode -----> 每一個鍵對應的一個值
BOM階段
概念
BOM（Browser Object Model）即瀏覽器對象模型。
js中的頂級對象
window對象是js中的頂級對象，定義在全局作用域中的變量、函數都會變成window對象的屬性和方法，在調用的時候可以省略window。
頁面加載事件
window.onload = function() {};
特點：
頁面上的所有元素都創建完成，並且引用的外部資源都下載完畢（js,css）
定時器
setTimeout()
語法：
setTimeout(function(){}, time)
總結：
1. 返回一個當前定時器的id
2. time毫秒
setInterval()
語法：
setInterval(function(){}, time);
總結：
1. 返回當前定時器的id
2. time毫秒
location對象
1. href屬性
2. window.open('url路徑');
3. reload(boolean);
