什麼是DOM

DOM，全稱Document Object Model 文檔對象模型
JS中通過DOM來對HTML文檔進行操作。只要理解了DOM就可以隨心所欲的操作WEB頁面
文檔
- 文檔表示的就是整個的HTML網頁文檔
對象
- 對象表示將網頁中的每一個部分都轉換爲一個對象
模型
- 使用模型來表示對象之間的關係

模型

節點

節點Node，是構成網頁的最基本的組成部分，網頁中的每一個部分都可以稱爲是一個節點(html標籤、屬性、文本、註釋、整個文檔等都是一個節點)
節點的類型是不同的，屬性和方法也不同
節點分類
- 文檔節點：整個HTML文檔
- 元素節點： HTML文檔中的HTML標籤
- 屬性節點：元素的屬性
- 文本節點： HTML標籤中的文本內容

節點的屬性

文檔節點(document)

文檔節點document，代表的是整個HTML文檔，網頁中的所有節點都是它的子節點
document對象作爲window對象的屬性存在，可以直接使用
通過該對象可以在整個文檔內訪問查找節點對象，並可以通過該對象創建各種節點對象

元素節點(Element)

HTML中的各種標籤都是元素節點，最常用的一個節點
瀏覽器會將頁面中所有的標籤都轉換爲一個元素節點，可以通過document的方法來獲取元素節點
比如：
- document.getElementByld()
- 根據id屬性值獲取一個元素節點對象

文本節點(Text)

文本節點表示的是HTML標籤以外的文本內容，任意非HTML的文本都是文本節點
包括可以字面解釋的純文本內容
文本節點一般式作爲元素節點的子節點存在
獲取文本節點時，一般先要獲取元素節點，再通過元素節點獲取文本節點
例如：
- 元素節點.firstChild;
- 獲取元素節點的第一個子節點，一般爲文本節點

屬性節點(Attr)

屬性節點表示的是標籤中的一個一個的屬性，這裏要注意的是屬性節點並非是元素節點的子節點，而是元素節點的一部分
可以通過元素節點來獲取指定的屬性節點
例如：
- 元素節點.getAttributeNode(“屬性名”);
注意：一般不使用屬性節點

事件(Event)

事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間
JavaScript與 HTML之間的交互是通過事件實現的
對於web應用來說，有這些代表性的事件：點擊某個元素、將鼠標移動至某個元素上方、按下鍵盤上某個鍵，等等

屬性	此事件發生在何時
onabort	圖像的加載被中斷。
onblur	元素失去焦點。
onchange	域的內容被改變。
onclick	當用戶點擊某個對象時調用的事件句柄
ondblclick	當用戶雙擊某個對象時調用的事件句柄
onerror	在加載文檔或圖像時發生錯誤。
onfocus	元素獲得焦點。
onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按下並鬆開。
onkeyup	某個鍵盤按鍵被鬆開。
onload	一張頁面或一幅圖像完成加載
onmousedown	鼠標按鈕被按下。
onmousemove	鼠標被移動
onmouseout	鼠標從某元素移開。
onmouseover	鼠標移到某元素之上。
onmouseup	鼠標按鍵被鬆開。
onreset	重置按鈕被點擊。
onresize	窗口或框架被重新調整大小。
onselect	文本被選中。
onsubmit	確認按鈕被點擊。
onunload	用戶退出頁面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一個按鈕</button>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			//綁定一個單擊事件
			btn.onclick = function(){
				alert("你還點");
			};
		</script>
	</body>
</html>

文檔的加載

瀏覽器在加載一個頁面時，是按照自上向下的順序加載的，讀取到一行就運行一行
如果將script標籤寫到頁面的上邊，在代碼執行時，頁面還沒有加載，DOM對象也沒有加載

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					alert("hello");
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn">點我一下</button>
		
	</body>
</html>

獲取元素節點

通過document對象調用
getElementById()
通過id屬性獲取一個元素節點對象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
	</head>
	<body>
		<button id="btn">我是一個按鈕</button>
		<script type="text/javascript">
			//獲取到button對象
			var btn = document.getElementById("btn");
			//修改按鈕的文字
			btn.innerHTML = "I'm Button";			
		</script>
	</body>
</html>

getElementsByTagName()
通過標籤名獲取一組元素節點對象
返回一個類數組對象
getElementsByName()
通過name屬性獲取一組元素節點對象
getElementsByClassName()
通過class屬性值獲取一組元素節點對象(不支持IE8及以下的瀏覽器)
body 屬性
保存的body的引用
documentElement 屬性
保存的是html根標籤
all 屬性
代表頁面中所有的元素
getElementsByTagName("*") 也代表所有元素

<!-- 切換圖片 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 332px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//獲取兩個按鈕
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				//獲取img標籤
				var img = document.getElementsByTagName("img")[0];
				
				//創建一個數組，保存圖片的路徑
				var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];
				
				//創建一個變量，保存當前顯示圖片的索引
				var index = 0;
				
				//設置提示文字
				var info = document.getElementById("info");
				info.innerHTML = "一共" + imgArr.length + "張圖片，當前第 " + (index + 1) + " 張";
				
				prev.onclick = function(){
					//alert("上一張");
					index--;
					if(index < 0){	
						index = imgArr.length - 1;
					}
					img.src = imgArr[index];
					info.innerHTML = "一共" + imgArr.length + "張圖片，當前第 " + (index + 1) + " 張";
				};
				next.onclick = function(){
					//alert("下一張");
					index++;
					if(index > imgArr.length - 1){	
						index = 0;
					}
					img.src = imgArr[index];
					info.innerHTML = "一共" + imgArr.length + "張圖片，當前第 " + (index + 1) + " 張";
				};
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img src="img/1.jpg" alt="冰棍" />
			<button id="prev">上一張</button>
			<button id="next">下一張</button>
		</div>
	</body>
</html>

獲取元素節點的子節點

通過具體的元素節點調用
getElementsByTagName()
- 方法，返回當前節點的指定標籤名後代節點
childNodes
- 屬性，表示當前節點的所有子節點(獲取包括文本節點在內的所有節點)
- 根據DOM標準，空白也會當成文本節點(注意：在IE8及以下的瀏覽器中，不會將空白文本當成子節點)
children
- 屬性，獲取當前元素的所有子元素
firstChild
- 屬性，表示當前節點的第一個子節點(包括空白文本節點)
firstElementChild(不支持IE8及以下的瀏覽器)
- 屬性，表示當前節點的第一個子元素
lastChild
- 屬性，表示當前節點的最後一個子節點

獲取父節點和兄弟節點

通過具體的節點調用
parentNode
- 屬性，表示當前節點的父節點
previousSibling
- 屬性，表示當前節點的前一個兄弟節點(可能獲取到空白的文本)
previousElementSibling
- 屬性，表示當前節點的前一個兄弟元素(IE8及以下不支持)
nextSibling
- 屬性，表示當前節點的後一個兄弟節點(可能獲取到空白的文本)

元素節點的屬性

獲取， 元素對象.屬性名
例
element.value
element.id
element.className
設置， 元素對象.屬性名 = 值
例
element.value = “hello”
element.id = “id01”
element.className = “newClass”

元素的屬性

innerHTML
元素節點通過該屬性獲取和設置標籤內部的html代碼
innerText
獲取到元素內部的文本內容
nodeValue
文本節點可以通過nodeValue屬性獲取和設置文本節點的內容

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			
			/*定義一個函數，專門來制定元素綁定單擊響應函數
			 idStr 要綁定單擊響應函數的對象的id屬性值
			 fun 時間的回調函數，單擊元素時， 該函數將會被觸發
			 * */
			function myClick(idStr, fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
			window.onload = function(){
				
				
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj節點
					var bj = document.getElementById("bj");
					alert(bj.innerHTML);
				};
				
				
				//查找所有li節點
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					var lis = document.getElementsByTagName("li");
					//alert(lis.length);
					for(var i = 0; i < lis.length; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				
				//查找name=gender的所有節點
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					var inputs = document.getElementsByName("gender");
					//alert(inputs.length);
					for(var i = 0; i < inputs.length; i++){
						/*
						 讀取元素節點屬性， 
						 使用   元素.屬性名  
						 class屬性不能讀取（class是js中的保留字）, 使用 className
						 * */
						alert(inputs[i].className);
					}
				};
				
				
				//查找#city下所有li節點
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					var city = document.getElementById("city");
					var lis = city.getElementsByTagName("li");
					for(var i = 0; i < lis.length; i++){
						alert(lis[i].innerHTML);
					}
					
				};
				
				
				//返回#city的所有子節點
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					var city = document.getElementById("city");
					var cns = city.childNodes;
					//alert(cns.length);
					/*for(var i = 0; i < cns.length; i++){
						alert(cns[i]);
					}*/
					var cns2 = city.children;
					alert(cns2.length);
					
				};
				
				
				
				//返回#phone的第一個子節點
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					var phone = document.getElementById("phone");
					var fir = phone.firstElementChild;
					alert(fir);
				};
				
				
				
				
				//返回#bj的父節點
				myClick("btn07", function(){
					var bj = document.getElementById("bj");
					var pn = bj.parentNode;
					alert(pn.innerText);
				});
				
				
				//返回#android的前一個兄弟節點
				myClick("btn08", function(){
					var and = document.getElementById("android");
					var ps = and.previousSibling;
					var pe = and.previousElementSibling;
					alert(pe.innerHTML);
				});
				
				
				//返回#username的value屬性值
				myClick("btn09", function(){
					var um = document.getElementById("username");
					alert(um.value);
				});
				
				
				
				//設置#username的value屬性值
				myClick("btn10", function(){
					var um = document.getElementById("username");
					um.value = "今天天氣真不錯";
				});
				
				
				
				//返回#bj的文本值
				myClick("btn11", function(){
					var bj = document.getElementById("bj");
					//alert(bj.innerHTML);
					//alert(bj.innerText);
					/*var fc = bj.firstChild;
					alert(fc.nodeValue);*/
					alert(bj.firstChild.nodeValue);
					
				});
			
			};
			

		</script>
	</head>
	<body>
		<div id="total">
			<div class="cla">
			<p>
				你喜歡哪個城市?
			</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li>東京</li>
				<li>上海</li>
				<li>首爾</li>
			</ul>
			<br />
			<br />
			<p>
				你喜歡哪款單擊遊戲?
			</p>
			
			<ul id="game">
				<li id="rl">紅警</li>
				<li>實況</li>
				<li>極品飛車</li>
				<li>魔獸</li>
			</ul>
			
			<br />
			<br />
			
			<p>
				你手機的操作系統是?
			</p>
			<ul id="phone">
				<li>IOS</li>
				<li id="android">Android</li>
				<li>Windows Phone</li>
			</ul>
			
		</div>
		<div class="inner">
			gender:
			<input class="hello" type="radio" name="gender" value="male" />
			Male
			<input class="hello" type="radio" name="gender" value="female"/>
			Female
			<br />
			<br />
			name:
			<input type="text" name="name" id="username" value="abcde" />
					
		</div>
		</div>	
		
		<div id="btnList">
			<div><button id="btn01">查找#bj節點</button></div>
			<div><button id="btn02">查找所有li節點</button></div>
			<div><button id="btn03">查找name=gender的所有節點</button></div>
			<div><button id="btn04">查找#city下所有li節點</button></div>
			<div><button id="btn05">返回#city的所有子節點</button></div>
			<div><button id="btn06">返回#phone的第一個子節點</button></div>
			<div><button id="btn07">返回#bj的父節點</button></div>
			<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
			<div><button id="btn09">返回#username的value屬性值</button></div>
			<div><button id="btn10">設置#username的value屬性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

<!-- 表單按鈕 -->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="UTF-8">
		<title>全選</title>
		<script type="text/javascript">
			window.onload = function(){
				
				//獲取四個多選框items
				var items = document.getElementsByName("items");
				
				var checkedAllBox = document.getElementById("checkedAllBox");
				//1.#checkedAllBtn
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function(){
					
					//alert(items.length);
					for(var i = 0; i < items.length; i++){
						//alert(items[i].checked);
						items[i].checked = true;
					}
					checkedAllBox.checked = true;
				};
				
				
				//2.#checkedNoBtn
				var checkedNoBtn = document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick = function(){
					
					for(var i = 0; i < items.length; i++){
						items[i].checked = false;
					}
					checkedAllBox.checked = false;
				};
				
				
				//3.#checkedRevBtn
				var checkedRevBtn = document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick = function(){
					checkedAllBox.checked = true;
					for(var i = 0; i < items.length; i++){
						items[i].checked = !items[i].checked;
						//只要有一個沒選中則就不是全選
						if(!items[i].checked){
							checkedAllBox.checked = false;
						}
					}
				};
				
				
				//4.#sendBtn
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function(){
					
					for(var i = 0; i < items.length; i++){
						//判斷多選框是否選中
						if(items[i].checked){
							alert(items[i].value);
						}
					}
				};
				
				
				//5.#checkedAllBox
				//var checkedAllBox = document.getElementById("checkedAllBox");
				checkedAllBox.onclick = function(){
					for(var i = 0; i < items.length; i++){
						items[i].checked = this.checked;
					}
				};
				
				
				//6.items
				for(var i = 0; i < items.length; i++){
					items[i].onclick = function(){
						checkedAllBox.checked = true;
						
						for(var j = 0; j < items.length; j++){
							//只要有一個沒選中則就不是全選
							if(!items[j].checked){
								checkedAllBox.checked = false;
								break;
							}
							
						}
					};
				}
				
				
			};
		</script>
	</head>
	<body>
		<form method="post" action="">
			你愛好的運動是?<input type="checkbox" id="checkedAllBox" />全選/全不選
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="籃球" />籃球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全 選" />
			<input type="button" id="checkedNoBtn" value="全不選" />
			<input type="button" id="checkedRevBtn" value="反 選" />
			<input type="button" id="sendBtn" value="提 交" />			
		</form>
	</body>
</html>

使用CSS選擇器進行查詢

querySelector()
需要一個選擇器的字符串作爲參數，可以根據一個CSS選擇器來查詢一個元素節點對象,只返回唯一的一個元素(如果滿足條件的元素有多個，只會返回第一個)

var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");

querySelectorAll()
和 querySelector()用法類似，不同的是它會將符合條件的元素封裝到一個數組中返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//var body = document.getElementsByTagName("body")[0];
				var body = document.body;
				var html = document.documentElement;
				//console.log(html);
				var all = document.all;
				//console.log(all.length);
				/*for(var i = 0; i < all.length; i++){
					console.log(all[i]);
				}*/
				//all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				var box1 = document.getElementsByClassName("box1");
				//console.log(box1.length);
				var divs = document.getElementsByTagName("div");
				var div = document.querySelector(".box1 div");
				var box1 = document.querySelector(".box1");
				//console.log(div.innerHTML);
				//console.log(box1.innerHTML);
				var box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1.length);
				
			};
		</script>
	</head>
	<body>
		<div id="box2"></div>
		<div class="box1">
			我是第一個box1
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div></div>
	</body>
</html>

節點的修改

創建節點
- document.createElement(標籤名)
  創建一個元素節點對象，它需要一個標籤名作爲參數，將會根據標籤名創建元素節點對象，並將創建好的對象作爲返回值返回
- document.createTextNode(String)
  創建一個文本節點對象，需要一個文本內容作爲參數，將會根據該內容創建文本節點，並將新的節點返回
插入節點
- 父節點.appendChild(子節點)
  向一個父節點中添加一個新的子節點
- 父節點.insertBefore(新節點，舊節點)
  在指定的子節點前插入新的子節點
替換節點
- 父節點.replaceChild(新節點，舊節點)
  使用指定的子節點替換已有的子節點
刪除節點
- 父節點.removeChild(子節點)

<!-- DOM增刪改 -->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			window.onload = function(){
				//創建一個"廣州"節點，添加到#city下
				myClick("btn01", function(){
					//創建廣州節點 <li>廣州</li>
					var li = document.createElement("li");
					var gzText = document.createTextNode("廣州");
					li.appendChild(gzText);
					
					var city = document.getElementById("city");
					city.appendChild(li);
					
				});
				
				
				//將"廣州"節點插入到#bj前面
				myClick("btn02", function(){
					//創建一個廣州
					var li = document.createElement("li");
					var gzText = document.createTextNode("廣州");
					li.appendChild(gzText);
					
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					city.insertBefore(li, bj);
					
				});
				
				
				//使用"廣州"節點替換#bj節點
				myClick("btn03", function(){
					//創建一個廣州
					var li = document.createElement("li");
					var gzText = document.createTextNode("廣州");
					li.appendChild(gzText);
					
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					city.replaceChild(li, bj);
					
				});
				
				
				//刪除#bj節點
				myClick("btn04", function(){
					var bj = document.getElementById("bj");
					/*var city = document.getElementById("city");
					city.removeChild(bj);*/
					bj.parentNode.removeChild(bj);
					
				});
				
				
				//讀取#city內的HTML代碼
				myClick("btn05", function(){
					var city = document.getElementById("city");
					alert(city.innerHTML);
				});
				
				
				//設置#bj內的HTML代碼
				myClick("btn06", function(){
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				//向city中添加廣州
				myClick("btn07", function(){
					var city = document.getElementById("city");
					//city.innerHTML += "<li>廣州</li>";
					var li = document.createElement("li");
					li.innerHTML = "廣州";
					city.appendChild(li);
					
					
				});
				
				
			};
			function myClick(idStr, fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜歡哪個城市?
				</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>東京</li>
					<li>首爾</li>
				</ul>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">創建一個"廣州"節點，添加到#city下</button></div>
			<div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
			<div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
			<div><button id="btn04">刪除#bj節點</button></div>
			<div><button id="btn05">讀取#city內的HTML代碼</button></div>
			<div><button id="btn06">設置#bj內的HTML代碼</button></div>
			<div><button id="btn07">向city中添加廣州</button></div>

		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="UTF-8">
		<title>添加刪除記錄</title>
		<script type="text/javascript">
			
			//刪除tr的響應函數
			function delA(){
						//獲取當前tr
						var tr = this.parentNode.parentNode;
						//獲取要刪除的名字
						//var name = tr.getElementsByTagName("td")[0].innerHTML;
						var name = tr.children[0].innerHTML;
						
						//刪除之前提示
						var flag = confirm("確認刪除" + name + "嗎?");
						if(flag){
							//刪除
							tr.parentNode.removeChild(tr);
						}
						
						//超鏈接默認會跳轉頁面，通過在響應函數最後return false 取消默認行爲
						return false;
			};
					
			window.onload = function(){
				//獲取所有超鏈接
				var allA = document.getElementsByTagName("a");
				for(var i = 0; i < allA.length; i++){
					allA[i].onclick = delA;
				}
				
				/* 添加員工*/
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function(){
					//獲取用戶填寫的員工信息
					
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					//alert(name + ", "+ email + ", " + salary);
					
					//創建tr
					var tr = document.createElement("tr");
					//創建4個td
					var nameTd = document.createElement("td");
					var emailTd = document.createElement("td");
					var salaryTd = document.createElement("td");
					var aTd = document.createElement("td");
					//創建一個a元素
					var a = document.createElement("a");
					
					//創建文本節點
					var nameText = document.createTextNode(name);
					var emailText = document.createTextNode(email);
					var salaryText = document.createTextNode(salary);
					var delText = document.createTextNode("Delete");
					
					//文本添加到td中
					nameTd.appendChild(nameText);
					emailTd.appendChild(emailText);
					salaryTd.appendChild(salaryText);
					
					//向a中添加文本
					a.appendChild(delText);
					//將a添加到td中
					aTd.appendChild(a);
					
					//將td添加到tr中
					tr.appendChild(nameTd);
					tr.appendChild(emailTd);
					tr.appendChild(salaryTd);
					tr.appendChild(aTd);
					
					//向a中添加href屬性
					a.href = "javascript:;";
					
					//爲新添加的a再綁定一次單擊響應函數
					a.onclick = delA;
					
					//獲取table
					var employeeTable = document.getElementById("employeeTable");
					
					//獲取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					
					//將tr添加到tbody中
					tbody.appendChild(tr);
					
					
					
				};
				
			};
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>[email protected]</td>
				<td>5000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>[email protected]</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>[email protected]</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<div id="formDiv">
			<h4>添加新員工</h4>
			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"></td>
					<td class="inp">
						<button id="addEmpButton">
							Submit
						</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="UTF-8">
		<title>添加刪除記錄</title>
		<script type="text/javascript">
			
			//刪除tr的響應函數
			function delA(){
						//獲取當前tr
						var tr = this.parentNode.parentNode;
						//獲取要刪除的名字
						//var name = tr.getElementsByTagName("td")[0].innerHTML;
						var name = tr.children[0].innerHTML;
						
						//刪除之前提示
						var flag = confirm("確認刪除" + name + "嗎?");
						if(flag){
							//刪除
							tr.parentNode.removeChild(tr);
						}
						
						//超鏈接默認會跳轉頁面，通過在響應函數最後return false 取消默認行爲
						return false;
			};
					
			window.onload = function(){
				//獲取所有超鏈接
				var allA = document.getElementsByTagName("a");
				for(var i = 0; i < allA.length; i++){
					allA[i].onclick = delA;
				}
				
				/* 添加員工*/
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function(){
					//獲取用戶填寫的員工信息
					
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					//alert(name + ", "+ email + ", " + salary);
					
					//創建tr
					var tr = document.createElement("tr");
					
					//設置tr中的內容
					tr.innerHTML = "<td>" + name + "</td>" + 
									"<td>"+ email +"</td>" + 
									"<td>"+ salary +"</td>" + 
									"<td><a href='javascript:;'>Delete</a></td>";
					
					//獲取剛添加的a元素，併爲其綁定單擊響應函數
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = delA;
					
					//獲取table
					var employeeTable = document.getElementById("employeeTable");
					
					//獲取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					
					//將tr添加到tbody中
					tbody.appendChild(tr);
					
				};
				
			};
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>[email protected]</td>
				<td>5000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>[email protected]</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>[email protected]</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<div id="formDiv">
			<h4>添加新員工</h4>
			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"></td>
					<td class="inp">
						<button id="addEmpButton">
							Submit
						</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

DOM操作CSS

通過JS修改元素的樣式

語法：

元素.style.樣式名 = 樣式值;

注意：如果CSS的樣式名中含有 - ，需要將這種樣式名修改爲駝峯命名法 (去掉 - , 然後將 - 後的字母大寫)

通過style屬性設置的樣式都是內聯樣式，而內聯樣式有較高的優先級，所以通過JS修改的樣式往往會立即顯示
如果樣式中寫了 !important ，則JS不能覆蓋該樣式，所以儘量不要爲樣式添加 !important

通過JS讀取元素的樣式

語法：

元素.style.樣式名

通過style屬性設置和讀取的都是內聯樣式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "yellowgreen";
					
				};
				
				//點擊按鈕2以後，讀取元素的樣式
				var btn02 = document.getElementById("btn02");
				
				btn02.onclick = function(){
					//alert(box1.style.width);
					alert(box1.style.width);
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">點我一下</button>
		<button id="btn02">點我一下2</button>
		<br /><br />
		<div id="box1"></div>
	</body>
</html>

獲取元素的當前顯示的樣式

語法：

元素.currentStyle.樣式名

currentStyle只有IE瀏覽器支持
其它瀏覽器使用 getComputedStyle( ) 方法獲取元素當前的樣式，這個方法是window的方法，可以直接使用
- 第一個參數：要獲取樣式的元素
- 第二個參數：可以傳遞一個僞元素，一般都傳 null
- 該方法返回一個對象，對象中封裝了當前元素對應的樣式
- 通過 對象.樣式名 讀取樣式
- 如果獲取的樣式沒有設置，則會獲取到真實的值
- 不支持IE8及以下的瀏覽器
currentStyle 和 getComputedStyle( ) 讀取到的樣式都是只讀的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//點擊按鈕以後讀取box1的樣式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//alert("hello");
					//正常瀏覽器方式
					//alert(getComputedStyle(box1, null).width);
					//IE8的方式
					//alert(box1.currentStyle.backgroundColor);
					//alert(getStyle(box1, "width"));
					
					var w = getStyle(box1, "width");
					alert(w);
					
					
				};
				
			};
			/* 定義一個函數， 用來獲取指定元素的當前的樣式
			 	obj 要獲取樣式的元素
			 	name 要獲取的樣式名
			 	
			 * */
			function getStyle(obj, name){
				
				if(window.getComputedStyle){
					//正常瀏覽器的方式
					return getComputedStyle(obj, null)[name];
				}else{
					//IE8的方式
					return obj.currentStyle[name];
				}
				
				//return window.getComputedStyle?getComputedStyle(obj, null)[name]:obj.currentStyle[name];
				
				/*if(obj.currentStyle){
					//IE8的方式
					return obj.currentStyle[name];
				}else{
					//正常瀏覽器的方式
					return getComputedStyle(obj, null)[name];
				}*/
				
				
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">點我一下</button>
		<br /><br />
		<div id="box1"></div>
	</body>
</html>

DOM Element

element.clientHeight 返回元素的可見高度(包括內容區和內邊距)
element.clientWidth 返回元素的可見寬度 (包括內容區和內邊距)

這些屬性都不帶px，返回都是一個數字，可以直接計算
這些屬性都是只讀的

element.offsetHeight 返回元素的高度(元素整個高度，包括內容區，內邊距和邊框 )
element.offsetWidth 返回元素的寬度(元素整個寬度，包括內容區，內邊距和邊框)
element.offsetLeft 返回元素的水平偏移位置 (當前元素相對於其定位父元素的水平偏移量)
element.offsetParent 返回當前元素的定位父元素(獲取離當前元素最近的開啓了定位的祖先元素，如果所有的祖先元素都沒有開啓定位，則返回body)
element.offsetTop 返回元素的垂直偏移位置(當前元素相對於其定位父元素的垂直偏移量)
element.scrollHeight 返回元素的整體(滾動區域)高度
element.scrollWidth 返回元素的整體(滾動區域)寬度
element.scrollLeft 返回元素左邊緣與視圖之間的距離(水平滾動條滾動距離)
element.scrollTop 返回元素上邊緣與視圖之間的距離(垂直滾動條滾動距離)

當滿足 scrollHeight - scrollTop == clientHeight ，說明垂直滾動條滾動到底

當滿足 scrollWidth - scrollLeft == clientWidth ，說明水平滾動條滾動到底

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 10px;
				border: 10px solid yellow;
			}
			#box2{
				padding: 100px;
				background-color: #bfa;
			}
			#box4{
				width: 200px;
				height: 300px;
				background-color: #bfa;
				overflow: auto;
			}
			#box5{
				width: 450px;
				height: 600px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				var box4 = document.getElementById("box4");
				btn01.onclick = function(){
					//alert(box1.clientWidth);
					
					//alert(box1.offsetHeight);
					var op = box1.offsetParent;
					//alert(op.id);
					//alert(box1.offsetLeft);
					//alert(box4.clientHeight);
					//alert(box4.scrollHeight);
					//alert(box4.scrollWidth);
					//alert(box4.scrollLeft);
					//alert(box4.scrollTop);
					//alert(box4.clientHeight);//283
					//alert(box4.scrollHeight);//600
					alert(box4.scrollHeight - box4.scrollTop);//283
					
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">點我一下</button>
		<br /><br />
		<div id="box4">
			<div id="box5"></div>
		</div>
		
		<br /><br />
		<div id="box3" >
			<div id="box2" style="position: relative;">
				<div id="box1"></div>
			</div>
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#info{
				width: 300px;
				height: 500px;
				background-color: #bfa;
				overflow: auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*當垂直滾動條滾動到底時，使表單項可用
				 onscroll : 該事件會在元素的滾動條滾動時觸發
				 * */
				//獲取id爲info的p元素
				var info = document.getElementById("info");
				var inputs = document.getElementsByTagName("input");
				
				//爲info綁定一個滾動條滾動事件
				info.onscroll = function(){
					//檢查垂直滾動條是否滾動到底
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//滾動條滾動到底，使表單項可用
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
				};
				
			};
		</script>
	</head>
	<body>
		<h3>歡迎用戶註冊</h3>
		<p id="info">

			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
			請仔細閱讀以下協議，如果你不仔細閱讀就別註冊
		</p>
		<input type="checkbox" disabled="disabled" />我已仔細閱讀協議，一定遵守
		<input type="submit" value="註冊" disabled="disabled" />
	</body>
</html>

事件(Event)對象

當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象作爲實參傳遞進響應函數
在事件對象中封裝了當前事件相關的一切信息，比如，鼠標的座標、鍵盤哪個按鍵按下、鼠標滾輪滾動的方向等等
onmousemove 事件會在鼠標指針在元素中移動時被觸發

注意：

在IE8中，響應函數被觸發時，瀏覽器不會傳遞事件對象
在IE8及以下的瀏覽器中，是將事件對象作爲window對象的屬性保存的

clientX 返回當事件被觸發時，鼠標指針的水平座標(獲取鼠標在當前的可見窗口的座標)
clientY 返回當事件被觸發時，鼠標指針的垂直座標(獲取鼠標在當前的可見窗口的座標)
pageX 和 pageY 獲取鼠標相對於當前頁面的座標(IE8中不支持)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#areaDiv{
				width: 300px;
				height: 50px;
				border: 1px solid black;
			}
			#showMsg{
				width: 300px;
				height: 20px;
				border: 1px solid black;
				margin-top: 10px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/* 當鼠標在areaDiv中移動時，在showMsg中顯示鼠標的座標 */
				var areaDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");
				areaDiv.onmousemove = function(event){
					
					/*if(!event){
						event = window.event;
					}*/
					event = event || window.event;
					
					var x = event.clientX;
					var y = event.clientY;
					
					showMsg.innerHTML = "x = " + x + ", y = " + y;
				};
				
			};
		</script>
	</head>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/* 使div可以跟隨鼠標移動*/
				var box1 = document.getElementById("box1");
				document.onmousemove = function(event){
					//獲取鼠標座標
					event = event || window.event;
					
					//獲取滾動條滾動的距離
					/* chrome認爲瀏覽器滾動條是body的 ，可以通過 body.scrollTop 獲取
					 * 火狐等瀏覽器認爲滾動條是html的, 通過 document.documentElement.scrollTop 獲取
					 
					 * */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					
					
					
					
					var left = event.pageX;
					var top = event.pageY;
					
					//設置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					
					
					
				};
				
			};
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box1"></div>
	</body>
</html>

事件的冒泡(Bubble)

冒泡指的是事件的向上傳導，當後代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發

在開發中大部分情況的冒泡都是有用的，如果不希望發生事件冒泡可以通過事件對象取消冒泡
取消冒泡

event.cancelBubble = true;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			#s1{
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//爲s1綁定單擊響應函數
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
					event = event || window.event;
					alert("我是span的單擊響應函數");
					//取消冒泡
					event.cancelBubble = true;
				};
				//爲box1綁定單擊響應函數
				var box1 = document.getElementById("box1");
				box1.onclick = function(event){
					event = event || window.event;
					alert("我是div的單擊響應函數");
					event.cancelBubble = true;
				};
				//爲body綁定單擊響應函數
				document.body.onclick = function(){
					alert("我是body的單擊響應函數");
				};
			};
		</script>
	</head>
	<body>
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/* 使div可以跟隨鼠標移動*/
				var box1 = document.getElementById("box1");
				document.onmousemove = function(event){
					//獲取鼠標座標
					event = event || window.event;
					
					//獲取滾動條滾動的距離
					/* chrome認爲瀏覽器滾動條是body的 ，可以通過 body.scrollTop 獲取
					 * 火狐等瀏覽器認爲滾動條是html的, 通過 document.documentElement.scrollTop 獲取
					 
					 * */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					
					
					
					
					var left = event.pageX;
					var top = event.pageY;
					
					//設置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";		
					
				};
				var box2 = document.getElementById("box2");
				box2.onmousemove = function(event){
					event = event || window.event;
					event.cancelBubble = true;
				};
				
			};
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box2" style="width: 500px;height: 500px;background-color: #bfa;"></div>
		<div id="box1"></div>
	</body>
</html>

事件的委派

只綁定一次事件，即可應用到多個元素上，即使元素是後添加的

事件的委派：將事件統一綁定給元素的共同的祖先元素，後代元素上的事件觸發時，會一直冒泡到祖先元素，從而通過祖先元素的響應函數來處理事件
事件委派是利用了冒泡，通過委派可以減少事件綁定次數

target 返回觸發此事件的元素（事件的目標節點）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				
				var u1 = document.getElementById("u1");
				
				
				//點擊按鈕添加超鏈接
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//創建一個li
					var li = document.createElement("li");
					li.innerHTML = "<a href='javascript:;' class='link'>新建的超鏈接</a>";
					//將li添加到ul中
					u1.appendChild(li);
				};
				
				/*
				 * 爲每一個超鏈接綁定一個單擊響應函數
				 */
				//獲取所有的a
				var allA = document.getElementsByTagName("a");
				/*for(var i = 0; i < allA.length; i++){
					allA[i].onclick = function(){
						alert("我是a的單擊響應函數");
					};
				}*/
				
				//爲ul綁定一個單擊響應函數
				u1.onclick = function(event){
					event = event || window.event;
					//alert(event.target);
					//如果觸發事件的對象是期望的元素，則執行否則不執行
					if(event.target.className == "link"){
						alert("我是ul的單擊響應函數");
					}
					
				};
				
				
			};
		</script>
	</head>
	<body>
		<button id="btn01">添加超鏈接</button>
		<ul id="u1" style="background-color: #bfa;">
			<li>
				<p>我是p元素</p>
			</li>
			<li><a href="javascript:;" class="link">超鏈接一</a></li>
			<li><a href="javascript:;" class="link">超鏈接二</a></li>
			<li><a href="javascript:;" class="link">超鏈接三</a></li>
		</ul>
	</body>
</html>

事件的綁定

addEventListener() 可以爲元素綁定響應函數
- 參數：
  - 1 事件的字符串，不要on
  - 2 回調函數，當事件觸發時該函數會被調用
  - 3 是否在捕獲階段觸發事件，需要一個布爾值，一般都傳 false
addEventListener() 可以同時爲一個元素的相同事件同時綁定多個響應函數，當事件被觸發時，響應函數將會按照函數的綁定順序執行(不支持IE8及以下的瀏覽器)
在IE8及以下瀏覽器中使用 attachEvent() 來綁定事件，可以綁定多個處理函數，不同的是後綁定先執行
attachEvent()參數
- 1 事件的字符串， 要on
- 2 回調函數

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 點擊按鈕以後彈出一個內容
				 */
				var btn01 = document.getElementById("btn01");
				
				
				/*btn01.addEventListener("click", function(){
					alert(1);
				}, false);
				btn01.addEventListener("click", function(){
					alert(2);
				}, false);
				btn01.addEventListener("click", function(){
					alert(3);
				}, false);*/
				
				/*btn01.attachEvent("onclick", function(){
					alert(1);
				});
				btn01.attachEvent("onclick", function(){
					alert(2);
				});
				btn01.attachEvent("onclick", function(){
					alert(3);
				});*/
				
				
				/*btn01.addEventListener("click", function(){
					alert(this);
				}, false);*/
				/*btn01.attachEvent("onclick", function(){
					alert(this);
				});*/
				
				bind(btn01, "click", function(){
					alert(this);
				});
				
				
			};
			
			//定義一個函數，爲指定元素綁定響應函數
			/*
			 * addEventListener()中的this是綁定事件的對象
			 * attachEvent()中的this是window
			 * 需要統一兩個方法this
			 * 
			 * 參數：
			 * obj 要綁定事件的對象
			 * eventStr  事件的字符串(不要on)
			 * callback  回調函數
			 */
			function bind(obj, eventStr, callback){
				if(obj.addEventListener){
					//大部分瀏覽器兼容的方式
					obj.addEventListener(eventStr, callback, false);
				}else{
					/*
					 * this是誰由調用方式決定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on" + eventStr, function(){
						//在匿名函數中調用回調函數
						callback.call(obj);
					});
				}
				
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">點我一下</button>
	</body>
</html>

事件的傳播

關於事件的傳播網景公司和微軟公司有不同的理解
微軟公司認爲事件應該是由內向外傳播，當事件觸發時，應該先觸發當前元素上的事件，然後再向當前元素的祖先元素上傳播，也就是事件應該在冒泡階段執行
網景公司認爲事件應該是由外向內傳播(捕獲)，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件
W3C綜合了兩個公司的方案，將事件傳播分成了三個階段
- 1 捕獲階段
  - 在捕獲階段時，從最外層的祖先元素向目標元素進行事件的捕獲，但是默認此時不會觸發事件
- 2 目標階段
  - 事件捕獲到目標元素，捕獲結束，開始在目標元素上觸發事件
- 3 冒泡階段
  - 事件從目標元素向它的祖先元素傳遞，依次觸發祖先元素上的事件
如果希望在捕獲階段就觸發事件，可以將 addEventListener()的第三個參數設置爲true(一般情況不會在捕獲階段觸發事件)
IE8及以下的瀏覽器沒有捕獲階段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			#box3{
				width: 150px;
				height: 150px;
				background-color: skyblue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				bind(box1, "click", function(){
					alert("我是box1的響應函數");
				});
				bind(box2, "click", function(){
					alert("我是box2的響應函數");
				});
				bind(box3, "click", function(){
					alert("我是box3的響應函數");
				});
				
				
			};
			function bind(obj, eventStr, callback){
				if(obj.addEventListener){
					//大部分瀏覽器兼容的方式
					obj.addEventListener(eventStr, callback, false);
				}else{
					/*
					 * this是誰由調用方式決定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on" + eventStr, function(){
						//在匿名函數中調用回調函數
						callback.call(obj);
					});
				}
				
			}
		</script>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
	</body>
</html>

鼠標拖拽

<!-- 拖拽 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*拖拽box1
				 * - 拖拽過程
				 *   1. 當鼠標在被拖拽元素上按下時，開始拖拽    onmousedown 鼠標按鈕被按下 
				 *   2. 當鼠標移動時被拖拽元素跟隨鼠標移動        onmousemove 鼠標被移動 
				 *   3. 當鼠標鬆開時，被拖拽元素固定在當前位置     onmouseup 鼠標按鍵被鬆開 
				 * 
				 */
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img1 = document.getElementById("img1");
				//開啓box1拖拽
				drag(box1);
				//開啓box2拖拽
				drag(box2);
				//開啓img1拖拽
				drag(img1);
							
			};
			/*
			 * 提取一個專門設置拖拽的函數
			 * 參數： 開啓拖拽的元素
			 */
			function drag(obj){
				//爲box1綁定一個鼠標按下事件
				obj.onmousedown = function(event){
					
					//設置box1捕獲所有鼠標按下的事件(針對IE8設置)
					/*
					 * setCapture()只有IE支持，chrome調用會報錯
					 */
					/*if(obj.setCapture){
						obj.setCapture();
					}*/
					
					obj.setCapture && obj.setCapture();
					
					
					event = event || window.event;
					
					//div的偏移量  鼠標.clientX - 元素.offsetLeft
					//div的偏移量  鼠標.clientY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;
					
					
					//爲document綁定一個onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//獲取鼠標座標
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						//修改box1的位置
						obj.style.left = left + "px";
						obj.style.top = top + "px";
						
					};
					//document綁定一個鼠標鬆開事件
					document.onmouseup = function(){
						//當鼠標鬆開時，被拖拽元素固定在當前位置     onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						
						//取消document.onmouseup事件
						document.onmouseup = null;
						//當鼠標鬆開時，取消對事件的捕獲(針對IE8)
						/*if(obj.releaseCapture){
							obj.releaseCapture();
						}*/
						
						obj.releaseCapture && obj.releaseCapture();
					};
					/*
					 * 當拖拽網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容,
					 * 會導致拖拽功能異常，這是瀏覽器提供的默認行爲,可以通過 return false 來取消默認行爲
					   但對IE8不起作用
					 * */
					return false;
					
					
				};
			}
			
			
		</script>
	</head>
	<body>
		我是一段文字
		
		<div id="box1"></div>
		
		<div id="box2"></div>
		
		<img src="img/3.png" alt="" id="img1" style="position: absolute;"/>
	</body>
</html>

setCapture()
當調用一個元素的setCapture()方法後，將會把下一次所有的鼠標按下相關的事件捕獲到自身上(IE8特有)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				btn01.onclick = function(){
					alert(1);
				};
				btn02.onclick = function(){
					alert(2);
				};
				//設置btn01對鼠標相關事件進行捕獲
				//當調用一個元素的setCapture()方法後，將會把下一次所有的鼠標按下相關的事件捕獲到自身上
				btn01.setCapture();
				
			};
		</script>
	</head>
	<body>
		<button id="btn01">按鈕01</button>
		<button id="btn02">按鈕02</button>
	</body>
</html>

鼠標滾輪事件

onmousewheel 鼠標滾輪滾動事件，滾輪滾動時觸發(火狐不支持該屬性)
在火狐中需要使用 DOMMouseScroll 綁定滾輪滾動事件
- 該事件需要通過 addEventListener()函數來綁定
event.wheelDelta 獲取鼠標滾輪滾動方向
- 向上滾 120，向下滾 -120
- 這個值不看大小，只看正負
- 火狐不支持
event.detail 在火狐中獲取滾動方向
- 向上滾 -3 ，向下滾 3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 當鼠標滾輪向下滾動時，box1變長
				 * 當鼠標滾輪向上滾動時，box1變短
				 */
				var box1 = document.getElementById("box1");
				
				//爲box1綁定一個鼠標滾輪滾動的事件
				box1.onmousewheel = function(event){
					event = event || window.event;
					
					//判斷鼠標滾輪滾動方向
					//獲取鼠標滾輪滾動方向
					//alert(event.wheelDelta);
					
					//火狐使用
					//alert(event.detail);
					
					if(event.wheelDelta > 0 || event.detail < 0){
						
						//向上滾，box1變短
						box1.style.height = box1.clientHeight - 10 + "px";
						
						
					}else{
						
						//向下滾，box1變長
						box1.style.height = box1.clientHeight + 10 + "px";
						
					}
					
					/*
					 * 火狐瀏覽器，使用 addEventListener()方法綁定響應函數，取消默認行爲不能使用return false
					 * 需要使用event取消默認行爲event.preventDefault()
					 * IE8不支持 event.preventDefault()，如果直接調用會報錯
					 */
					 event.preventDefault && event.preventDefault();
					
					
					/*
					 * 當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動
					 * 這是瀏覽器的默認行爲i，如果不希望，則可以取消默認行爲
					 */
					return false;
					
					
					
					
				};
				
				//專爲火狐瀏覽器
				bind(box1, "DOMMouseScroll", box1.onmousewheel);
				
			};
			
			function bind(obj, eventStr, callback){
				if(obj.addEventListener){
					//大部分瀏覽器兼容的方式
					obj.addEventListener(eventStr, callback, false);
				}else{
					/*
					 * this是誰由調用方式決定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on" + eventStr, function(){
						//在匿名函數中調用回調函數
						callback.call(obj);
					});
				}
				
			}
			
		</script>
	</head>
	<body style="height: 2000px;">
		<div id="box1"></div>
	</body>
</html>

鍵盤事件

鍵盤事件一般都會綁定給一些可以獲取到焦點的對象或者是document

onkeydown 某個鍵盤按鍵被按下
- 如果一直按着某個按鍵不鬆手，則事件一直觸發
- 當onkeydown連續觸發時，第一次和第二次之間會間隔稍微長一點，其它的會非常快，這種設計是爲了防止誤操作
event.keyCode 獲取按鍵的編碼
- 可以判斷哪個按鍵被按下
onkeyup 某個鍵盤按鍵被鬆開
altKey 返回當事件被觸發時，“ALT” 是否被按下 (按下返回true，否則返回false)
ctrlKey “CTRL” 鍵是否被按下
shiftKey “SHIFT” 鍵是否被按下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.onkeydown = function(event){
					event = event || window.event;
					
					//console.log(event.keyCode);
					//判斷y鍵是否被按下
					if(event.keyCode == 89){
						console.log("y被按下了");
					}
					//判斷y和ctrl是否同時被按下
					if(event.keyCode == 89 && event.ctrlKey == true){
						console.log("y和ctrl同時被按下");
					}
					
				};
				/*document.onkeyup = function(event){
					console.log("按鍵鬆開了");
				};*/
				
				var input = document.getElementsByTagName("input")[0];
				input.onkeydown = function(event){
					event = event || window.event;
					//console.log(event.keyCode);
					//數字keyCode 48-57
					//使文本框中不能輸入數字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						return false;
					}
					
					//在文本框中輸入內容，屬於onkeydown的默認行爲，如果取消，則輸入內容不會出現
					//return false;
									
					
				};
				
				
			};
		</script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

<!-- 移動箱子 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				//使div可以根據不同的方向鍵向不同的方向移動
				document.onkeydown = function(event){
					event = event || window.event;
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					
					//定義一個變量，表示移動的速度
					var speed = 10;
					
					//當用戶按了ctrl以後，速度加快
					if(event.ctrlKey){
						speed = 50;
					}
					
					switch(event.keyCode){
						case 37:
							//alert("向左"); left值減小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
					
					
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

前端 JavaScript DOM