document&遺留DOM&相互關係查詢&元素節點&屬性節點&CSS樣式&繫結事件
	什麼是DOM
		DOM全稱Document Object Model文章物件模型
		作用：使JavaScript有了訪問HTML的能力
		瀏覽器會自動加：thead；tbody
	document.
		getElementById(元素id)
			單個dom物件
		getElementsByTagName(標籤名)
			包含dom物件的陣列
		getElementsByClassName(類名)
			包含dom物件的陣列
				IE8+
		getElementsByName(元素的name屬性)
			包含dom物件的陣列
		querySelector(css選擇器)
			單個dom物件
				IE7+
		querySelectorAll(css選擇器)
			包含dom物件的陣列
				IE7+
	遺留DOM
		document.body
			返回body節點
		document.forms[0]
			返回表單陣列
		document.formName.name
			返回單個表單項或陣列
		document.anchors
			返回錨點陣列
		document.links
			返回連結陣列
		document.images
			返回圖片陣列
		document.all
			返回所有的元素陣列
	相互關係查詢
		父節點.children
			返回所有元素型別的子節點陣列
		父節點.childNodes
			返回所有子節點，包括文字節點陣列
		父節點.firstChild
			返回第一個子節點，包括文字節點的單個物件
		父節點.firstElementChild
			返回第一個子節點，不包括文字節點的單個物件
				IE8+
		父節點.lastChild
			返回最後一個子節點，包括文字節點的單個物件
		父節點.lastElementChild
			返回最後一個子節點，不包括文字節點的單個物件
				IE8+
		父節點.getElementBy....()
			返回繼續呼叫getEle...系列方法查詢子節點的陣列/物件
		子節點.parentNode
			返回父節點的單個物件
		兄弟.previousSibling
			返回上一個兄弟，包括文字節點的單個物件
		兄弟.previousElementSibling
			返回上一個兄弟，不包括文字節點的單個物件
				IE8+
		兄弟.nextSibling
			返回下一個兄弟，包括文字節點的單個物件
		兄弟.nextElementSibling
			返回下一個兄弟，不包括文字節點的單個物件
				IE8+
	元素節點
		增
			建立文字節點：document.createTextNode('文字值');
			建立元素節點：document.createElement('標籤名');
			方法一：父節點.appendChild(子節點);
			方法二：父節點.insertBefore(新節點, 參照的節點);
		克隆
			原來的節點.cloneNode([true]); 
		替換
			父節點.replaceChild(新節點, 待替換的節點);
		刪除
			父節點.removeChild(子節點);
	屬性節點
		獲取
			元素節點.attributes
				獲取元素的所有屬性
			元素節點.getAttribute(屬性名)
				獲取指定屬性的值
			元素節點.屬性名
				獲取指定屬性的值
		新增/修改
			元素節點.setAttribute(屬性名，屬性值)
			元素節點.屬性名 = 值
		刪除
			元素節點.removeAttribute(屬性名)  //刪除一個屬性
		判斷元素是否存在某屬性
			elementNode.hasAttribute(屬性名)  檢測是否有某個屬性，有返回true，沒有返回false
	設定/獲取css樣式
		設定
			 elementNode.style.css樣式 = 值
		獲取
			node.currentStyle.樣式名稱
				IE支援
			getComputedStyle(node).樣式
				非IE支援
		1.可以獲取行內樣式
		2.可以獲取js已經設定過的樣式
		3.不可以獲取沒有設定過的樣式
		4.不可以獲取內聯樣式
	事件和事件物件
		事件
			事件繫結
				dom物件.事件名 = 處理函式;
			頁面事件
				onload ：當頁面載入完畢（頁面中的標籤和外部資源）後觸發
			焦點事件
				onfocus ：當獲取焦點時觸發
				onblur ：當失去焦點時觸發
			滑鼠事件
				onmouseover ：當滑鼠懸浮時觸發
				onmouseout ：當滑鼠離開時觸發
			鍵盤事件
				onkeypress ：當鍵盤按下時觸發（如果按住某個鍵不鬆開，會一直觸發press事件）
				onkeydown ：當鍵盤按下時觸發
				onkeyup ：當鍵盤彈起時觸發
			其他事件
				onchange ：內容改變時會觸發，常用於select>option。
				onsubmit ：表單提交時觸發，這個事件要給form繫結而不是給提交按鈕繫結
				onresize ： 頁面視窗改變大小時會觸發
				onscroll ：滾動條滾動時觸發
			事件處理函式中的this 表示繫結事件的那個物件。換句話說，點選的是誰，this就表示誰
		事件物件
			獲取
				window.event;
					IE
				傳遞給事件處理函式的形參
					非IE
			keyCode：表示鍵盤上的鍵對應的數值。
			altKey：表示是否按了alt鍵，按了結果為true，沒按結果為false（組合按鍵的時候，才會有作用）
			shiftKey：表示是否按了shift鍵，按了結果為true，沒按結果為false（組合按鍵的時候，才會有作用）
			ctrlKey：表示是否按了ctrl鍵，按了結果為true，沒按結果為false（組合按鍵的時候，才會有作用）
			pageX: 滑鼠距離頁面左邊的距離
			pageY: 滑鼠距離頁面上面的距離
			screenX: 滑鼠距離螢幕左邊的距離
			screenY: 滑鼠距離螢幕上面的距離