DOM總結
JavaScript組成部分以及關係圖
DOM概念 : DOM是文檔對象模型（Document Object Model）的簡稱，它的基本思想是把結構化文檔（比如HTML和XML）解析成一系列的節點（對象），再由這些節點組成一個樹狀結構（DOM Tree）。所有的節點和最終的樹狀結構，都有規範的對外接口，以達到使用編程語言操作文檔的目的（比如增刪內容）。
DOM可以理解成文檔（HTML文檔、XML文檔和SVG文檔）的編程接口。
節點概念:DOM的最小組成單位叫做節點（node），一個文檔的樹形結構（DOM樹），就是由各種不同類型的節點組成。
節點的主要類型：
對於HTML文檔，節點主要有以下六種類型：
①Document節點 文檔節點 整個文檔（window.document）
②DocumentType節點 文檔類型節點 文檔的類型（比如<!DOCTYPE html>）
③Element節點 元素節點 HTML元素（比如<body>、<a>等）
④Attribute節點 屬性節點 HTML元素的屬性（比如class=”right”）
⑤Text節點 文本節點 HTML文檔中出現的文本
⑥DocumentFragment節點 文檔碎片節點 文檔的片段（臨時倉庫）
瀏覽器原生提供一個Node對象，上表所有類型的節點都是Node對象派生出來的。也就是說，它們都繼承了Node的屬性和方法。
DOM節點：
瀏覽器在解析我們的HTML文檔的時候，瀏覽中的js引擎除了檢測我們js程序之外，還會把我們當前的HTML文檔中所有標籤或文本、屬性解析成一個節點，這個節點有叫做對象。每個節點對象都繼承了一個原生節點對象Node象.
獲取節點
getElementById(id) 獲取特定 ID 元素的節點
getElementsByTagName(tagName) 獲取相同元素的節點列表 返回數組，使用[0]來獲取
getElementsByName(name) 獲取相同名稱的節點列表(低版本瀏覽器會有兼容性問題;不是所有標籤都有name屬性)
getElementsByClassName() 獲取相同class屬性的節點列表(ie8及以下瀏覽器會有兼容性問題)
獲取、設置、刪除節點 屬性
tagName 獲取元素節點的標籤名
innerHTML 獲取元素節點裏的內容 W3C標準
outerHTML 獲取包括外部容器標籤的內容及標籤 非 W3C標準
innerText 獲取僅僅是容器裏的內容 非 W3C標準
例:<div id="news">就是一個div<a href="#" >a標籤</a></div>
var a = document.getElementById("news");//獲取節點
var c = a.innerHTML;
alert(c); //返回 就是一個div<a href="#">a標籤</a>
var d = a.outerHTML;
alert(d); 返回 <div id="news">就是一個div<a href="#">a標籤</a></div>
var e = a.innerText;
alert(e); 返回 就是一個diva標籤
id 獲取元素節點的 id 名稱
title 獲取元素節點的 title 屬性值（鼠標懸停時的提示）
className 獲取class屬性值
style CSS【內部樣式】屬性值
var w = window.getComputedStyle(box,null).width; //標準
var h = box.currentStyle["height"]; //IE8及以下的處理方式
獲取【內聯樣式】屬性值
例:<div id="news" style="color:yellow;height:180">就是一個div</div>
var a = document.getElementById("news"); 獲取節點
var s = a.style.color; //獲得style屬性 是一個組
alert(s); 彈出的就是color鍵的鍵名（屬性值）
var s = a.style; 獲得style屬性 是一個組
alert(s[0]); 彈出 就是a節點style屬性中一個屬性color
獲取【內部樣式】屬性值
例:
var w = window.getComputedStyle(a,null).width; W3C標準
alert(w); 彈出【內部樣式】id爲news的div的width屬性的值300px
var h = a.currentStyle.height; ie8及以下游覽器
alert(h); 彈出【內部樣式】id爲news的div的height屬性的值200px
獲得內部樣式屬性值的兼容寫法
function getStyle(dom,propertyName){
if(dom.currentStyle){
return dom.currentStyle[propertyName];
}
else{
return getComputedStyle(dom,null)[propertyName];
}
}
獲取樣式屬性值 dom.style.屬性=屬性值；
a.style.backgroundColor="yellow"; 背景顏色變色
a.style.width = "400px"; 寬度顏色變爲400px
getAttribute() 獲取特定元素節點屬性的值
獲取自定義屬性時，oDiv.xxx,IE最新版本不支持,其他瀏覽器不支持,因此要採用這個方法來訪問
setAttribute() 設置特定元素節點屬性的值(IE低版本瀏覽器不支持這個方法)
removeAttribute() 移除特定元素節點屬性(某些低版本瀏覽器不支持)
例:<div id="news" go="自定義屬性go">就是一個div</div>
var a = document.getElementById("news"); 獲取節點
var g =a. getAttribute("go");
alert(g); 彈出自定義屬性go
a.setAttribute("go","改變一下，看看變不變");
var g =a. getAttribute("go");
alert(g); 彈出改變一下，看看變不變
var g =a. removeAttribute("go");
var g =a. getAttribute("go");
alert(g); null
幾個常用的事件
onload 頁面加載完後
例:window.onload = function () { } 預加載 html 後執行
onclick 鼠標點擊
onmousemove 鼠標移動到某個元素產生事件（就是在某個元素上移動）
onmouseout 鼠標離開某個元素產生事件（就是離開某個元素）
onmouseover 鼠標在某個元素上浮動產生事件（就是進入某個元素）
Node節點
常用屬性
nodeType:表示節點類型
（Document返回9；Element返回1; Text返回3;Attribute返回 2）
常量：值不會發生改變的量叫做常量。
nodeName：表示節點的標籤名
nodeValue：表示文本節點類型的值 ？？？
childNodes：獲取當前元素節點的所有子節點
（這裏麪包含空白節點，在IE9之前，IE瀏覽器會自動忽略空白節點）
children：獲取只包含Element類型的節點 和 childNodes類似
firstChild：獲取當前元素節點的第一個子節點
firstElementChild：返回元素類型爲Element的第一個子節點
lastChild：獲取當前元素節點的最後一個子節點
lastElementChild：獲取當前元素節點的最後一個子節點（Element）
ownerDocument：獲取該節點的文檔根節點，相當與 document
parentNode：獲取當前節點的父節點
previousSibling：獲取當前節點的前一個同級節點
previousElementSibling：獲取當前節點的前一個同級節點(Element)
nextSibling：獲取當前節點的後一個同級節點
nextElementSibling：獲取當前節點的後一個同級節點（Element）
attributes：獲取當前元素節點的所有屬性節點集合
childrenElementCount：子元素的數量和length值相等
創建、刪除、插入、替換節點
1. 創建：
document.createElement(“標籤”) 創建一個元素節點
document.createTextNode(“文本內容”); 創建一個文本節點
2.插入：
appendChild(node)
box.appendChild(node); 把node節點插入到box的內部最後的位置。
insertBefore(newNode, existNode)
box.insertBefore(newNode, existNode); 把newNode節點插入到exsitNode的前面。
3.刪除：
removeChild(node) 刪除某個節點
box.removeChild(node);
4.替換：
replaceChild(a,b);
box.replaceChild(a,b); 把b替換成a
offsetParent（參照物父元素）
①當某個元素的父元素或以上元素都未進行CSS定位時，則返回body元素，也就是說元素的偏移量（offsetTop、offsetLeft）等屬性是以body爲參照物的
②當某個元素的父元素進行了CSS定位時（absolute或者relative），則返回父元素，也就是說元素的偏移量是以父元素爲參照物的
③當某個元素及其父元素都未進行CSS定位時，則返回距離最近的使用了CSS定位的元素。
事件
概念：事件是可以被JavaScript偵測到的行爲。網頁中的每個元素都可以產生某些可以觸發JavaScript函數的事件
事件的綁定方式
格式：節點對象.on+事件名 = 事件處理程序; div.onclick = function(){}
（事件目標：節點對象 事件類型：事件名 事件處理程序：函數）
事件分類
1.鼠標事件
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onmouseover 鼠標移到某元素之上。 冒泡
onmouseenter 在鼠標光標從元素外部移動到元素範圍之內時觸發。 不冒泡
onmouseout 鼠標從某元素移開。 冒泡
onmouseleave 在位於元素上方的鼠標光標移動到元素範圍之外時觸發。 不冒泡
onmousemove 鼠標被移動時觸發。
onmousedown 鼠標按鈕被按下。
onmouseup 鼠標按鍵被鬆開。
oncontextmenu 鼠標右鍵菜單展開時。
onmousewheel 鼠標滾輪事件 DOMMouseScroll（火狐，後面講）
事件傳播：事件冒泡
2.鍵盤事件
onkeydown 某個鍵盤按鍵被按下。
onkeyup 某個鍵盤按鍵被鬆開。
onkeypress 鍵盤<字符鍵>被按下,而且如果按住不放的話，會重複觸發此事件。
3.UI事件
onload 頁面元素（包括圖片多媒體等）加載完成後
onbeforeunload 用戶退出頁面。 （有兼容性問題）
onresize 窗口或框架被重新調整大小。（有兼容性問題）
onselect 文本被選中。 （有兼容性問題）
4.表單事件
<form >input系列的標籤</form>
onblur 元素失去焦點時觸發
onfocus 元素獲得焦點時觸發
onchange 元素內容被改變
onreset 重置按鈕被點擊
onsubmit 確認按鈕被點擊
oninput 輸入字符時觸發
事件對象 （Event對象）
概念：事件執行過程中的狀態，用來保存當前事件的信息對象
獲取事件對象
標準：事件處理函數的第一個參數
div.onclick = function(e){}
IE8 window.event
獲取event對象的兼容寫法
var ev=e||window.event;
獲取事件目標的兼容寫法
var t=ev.target||ev.srcElement;
Event對象公共屬性和方法
Target 返回觸發此事件的元素（事件的目標元素）。
Type 被觸發的事件的類型(一般用於判斷)。
preventDefault() 通知瀏覽器不要執行與事件關聯的默認動作。
stopPropagation() 取消事件的進一步冒泡。
鼠標/鍵盤事件Event屬性
altKey 返回當事件被觸發時，"ALT" 是否被按下。 返回true 或 false
ctrlKey 返回當事件被觸發時，"CTRL" 鍵是否被按下。 返回true 或 false
shiftKey 返回當事件被觸發時，“Shift" 鍵是否被按下。 返回true 或 false
button 返回當事件被觸發時，哪個鼠標按鈕被點擊。不同遊覽器返回的值不同
which 該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼(ascii碼) ie不兼容
keyCode 該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼(ascii碼)
clientX 返回當事件被觸發時，鼠標指針相對於瀏覽器可視區域的水平座標。
clientY 返回當事件被觸發時，鼠標指針相對於瀏覽器可視區域的垂直座標。
screenX 返回當某個事件被觸發時，鼠標指針相對於電腦屏幕的水平座標。
screenY 返回當某個事件被觸發時，鼠標指針相對於電腦屏幕的垂直座標。
IE事件Event屬性
cancelBubble：如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設爲 true （同 stopPropagation()）。
returnValue: 如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲 fasle，可以取消發生事件的源元素的默認動作（同preventDefault()）。
offsetX,offsetY: 發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
srcElement: 對於生成事件的 Window 對象、Document 對象或 Element 對象的引用（同 target）。
取消事件默認動作的兼容寫法
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue=false;
}
檢測鼠標按鍵e.button
W3C標準
0: 代表鼠標按下了左鍵 1: 代表按下了滾輪 2: 代表按下了右鍵
ie8及以下版本
1鼠標左鍵,2鼠標右鍵,3左右同時按,4滾輪,5左鍵加滾輪,6右鍵加滾輪,7三個同時
對比
offsetX, offsetY //鼠標相對於事件源對象的偏移量, 也就是元素座標，相對座標
clientX, clientY //鼠標相對於瀏覽器可視區域的位置，也就是瀏覽器座標
screenX, screenY //鼠標相對與電腦屏幕的位置
pageX,pageY //鼠標相對與文檔的位置（包括滾動條滾動的距離，即： clientX+document.body.scrollLeft，IE不支持）
獲取body節點對象
標準： document.body
IE : document.documentElement
滾動條距頂部的距離的兼容寫法
document.body.scrollTop||document.documentElement.scrollTop 滾動條距離頂部的距離
事件監聽
事件監聽與捕獲(反冒泡)
事件監聽器
格式：元素.addEventListener(事件名,事件處理函數,是否捕獲)
target.addEventListener("click", fn, false);
①可以綁定多個函數在一個對象上, 執行順序按照綁定的順序來
②第三個參數是否使用捕獲(反向冒泡)，默認false，爲冒泡
③其中插入一個綁定的事件【不管放哪裏 按順序】
移除：removeEventListener('click',fn)傳入的參數fn要跟添加時一樣(同一個函數)，否則不能移除事件
IE的事件監聽器
格式：元素.attachEvent(事件名,事件處理函數) ==> 事件名帶on
target.attachEvent("onclick",fun);
①可以綁定多個函數在一個對象上, 執行順序按照綁定的反序
②其中插入一個綁定的事件【不管放哪裏，先執行，事件監聽再倒序執行】
移除：detachEvent('onclick',fun)，傳入的參數fn要跟添加時一樣，否則不能移除事件
事件監聽器格式的兼容寫法
function on(dom,type,fn){
If(dom.attachEvent){
dom.attachEvent("on"+type,fn);
}else{
dom.addEventListener(type,fn);
}
};
on(btn,"click",function(){alert("兼容寫法")}); 【用】的時候要用on
Onmousewheel鼠標滾輪事件
DOMMouseSroll(事件監聽格式 在火狐)
例：on(document,"DOMMouseScroll",function(){alert("12")});
事件監聽鼠標滾動的兼容寫法
function add(){alert("hi")};
on(document,"DOMMouseScroll",add);
on(document,"mousewheel",add);
事件event屬性
例：
function on(dom,type,fn){
if(dom.attachEvent){
dom.attachEvent("on"+type,fn);
}else{
dom.addEventListener(type,fn);
}
};
function fn(e){
var event=window.event||e;
alert(event.wheelDelta); ie google 向上滑動返回120 向下滑動返回-120
alert(event.detail); 火狐 向上滑動返回-3 向下滑動返回3
};
on(document,"DOMMouseScroll",fn);
on(document,"mousewheel",fn);