如鵬網學習筆記（十）DOM
DOM筆記
一、DOM簡介
Document Object Model 文檔對象模型
DOM的節點樹模型：整個文檔按照從大到小的節點劃分，每一個內容都算作一個節點
DOM API 編程接口 可以用來操作頁面的任意一部分內容
js+DOM編程的思想：由js基本語法控制程序的執行邏輯，由DOM API進行元素的查找獲取，進而再對元素進行增刪改等操作
學習DOM，除開學習設計思想外，更多的是學習DOM API的用法
二、document對象
document對象，
是Windows對象的一個屬性，
表示整個HTML頁面，是DOM的核心對象，
是連接JavaScript和DOM的橋梁，使得我們可以在JavaScript環境中操作頁面內容，
提供了查找獲取元素節點的方法，所以document是DOM的編程入口，
此外還提供了創建新節點的方法
三、document對象獲取對象的方法
1，getElementById（String） 返回 Element 根據元素的id屬性值獲取元素
2，getElementsByTagName(String) 返回 NodeList數組 根據元素的標簽名獲取元素
3，getElementsByName(String) 返回 NodeList數組 根據元素的name屬性值獲取元素
nodeList.length 包含的元素個數
nodeList.item(index) 獲取指定索引位置的元素
註意：NodeList是動態更新的，即如果刪除的元素也在NodeList裏面，那麽也同時從NodeList裏面刪除
四、document創建新元素的方法
document.creatElement(tagName) 根據元素標簽名稱創建元素節點
五、document添加新元素的方法
1，先創建要添加的元素
var element = document.createElement(tagName)
2,獲取要添加元素的節點
var element = document.getElementById（String）
3,使用元素的方法appendChild(node)方法進行添加
六、Element操作元素的屬性
有兩種方式操作元素的屬性
1，直接使用element.屬性名 ：
var 變量名 = element.屬性名;//獲取屬性值
element.屬性名 = 屬性值; //給屬性賦值
註意：
a，因為class是關鍵字，所以操作class屬性時使用className代替
b，這種方式只能操作HTML標準規定的屬性，不能操作自定義屬性
c，在js中，操作checkbox、radio的checked屬性，select的selected屬性值時，使用true或FALSE，表單元素的disable屬性也是如此
2，另外三種操作屬性，且可操作自定義屬性
a，var 變量名 = getAttribute("屬性名"); 獲取屬性值
b，removeAttribute("屬性名"); 刪除指定屬性，沒有返回值
c，setAttribute("屬性名"，“新屬性值”); 修改/添加屬性
七、Element操作元素的子節點
子節點包括子元素和元素文本內容
element.getElementsByTagName() 根據子元素的標簽名獲取其內部的子元素
element.innerHTML("要寫入的HTML語句"); 以字符串的形式在該子節點內部插入HTML語句
element.insertBefore(newNode,node); 在子節點內部，在指定子節點前插入新子節點
element.appendChild(newNode); 在最後追加子節點
element.removeChild(); 刪除指定的子節點
八、操作樣式屬性
兩種方式：
1， element.style CSSStyleDeclaration類型的對象
使用 element.style.屬性名 的方式可以直接操作某個樣式屬性。
如：element.style.backgroundColor="gray";
註意：CSS中樣式屬性使用“-”連接兩個單詞，js中使用後面的單詞首字母大寫的方式連接！！
2， element.className = "另一個className"; 效果：空字符串可以實現刪除，可以實現指向另一個類，病通過CSS控制效果的切換
九、DOM事件機制
當瀏覽器狀態改變、用戶操作時都會出發一些事件。如：點擊了一個按鈕，出發了按鈕點擊的時間，按鈕稱為事件源
當一個時間被觸發時，瀏覽器就會創建一個event事件對象，這個時間對象包含和此時間相關的 各種信息，如點擊時間的時間對象包含點擊文字的信息，可供編程者使用
如果希望當一個時間發生時針對這個時間做一些處理，就可以給該時間註冊一個事件處理函數，時間觸發時，該函數會被調用
常見的事件有以下幾類：
1，窗體事件
頁面加載完成事件
load 頁面加載完成時觸發（window對象為事件源）
<script type="text/javascript">
window.onload=function(){
//只有頁面加載完成，才可確保id為div01的元素被獲取到
var element = document.getElementById("div01");
alert(element);
}
</script>
註意：load是事件的名稱，onload是元素的屬性，用來給元素註冊事件處理函數
2，鼠標事件
1，
onclick、ondblclick 鼠標單擊、雙擊時觸發
示例代碼：
<script type="text/javascript">
window.onload=function(){
getElementById("div01").onclick=function(){
alert("點到我了");
}
getElementById("div02").ondblclick=function(){
alert("雙擊到了");
}
}
</script>
onmouseover、onmouseout 鼠標指針經過或者移出元素時觸發的事件
onmousemove 鼠標指針移動時觸發（進入元素後）
onmousedown、onmouseup 鼠標按鍵按下、彈起時觸發（進入元素後）
2，鼠標事件的event對象包含如下信息：
button 點擊的那個鼠標按鍵（0、1、2）
altKey、ctrlKey、shiftKey 點擊時是否同時按下鍵盤的alt、ctrl、或者shift按鍵
clientX、clientY 鼠標指針的窗口坐標
screenX、screenY 鼠標指針的屏幕坐標
示例代碼：
<script type="javascript">
window.onload=function(){
getElementById("div01").onmousedown=function(){
alert(event.button);//打印出當前事件中鼠標按下的是哪一個按鍵
alert(event.altKey+event.ctrlKey+event.shiftKey);//打印出當前事件中鼠標按下時是否按了相應的按鍵
}
}
</script>
3，鍵盤事件
4，焦點事件
5，頁面加載完成事件
onload 頁面加載完成時觸發（window對象為事件源）
示例代碼：
<script type="text/javascript">
window.onload=function(){
var element = document.getElementById("div01");
alert(element);
}
</script>
處理事件的兩種方式
1，通過DOM方式把時間處理函數賦值給事件屬性（稱為註冊事件處理函數）
示例代碼：
<script type="text/javascript">
window.onload=function(){
document.getElementById("div01").onclick=function(){
alert("這是註冊事件處理函數的方式");
}
}
</script>
2，直接在HTML元素標簽的事件屬性上寫要執行的代碼
示例代碼：
<div onclick="alert(‘這是直接在元素標簽的事件屬性上寫執行方法的方式‘);"></div>
第一種處理方式的優先級大於第二種！！！！！
註意：
如果有個自定義函數fun1，
按照第一種方式的寫法為 element.onclick=fun1;//註意是將fun1這個函數的對象（不能帶括號），賦值給onclick
按照第二種方式的寫法為 onclick=fun1();//在元素的標簽裏寫上函數的調用
十、this的用法
示例代碼：
<script type="javascript">
function(){
alert(this);
}
window.onload=function(){
var obj = {"fun1",fun1};
var btn = document.getElementById("btn");
btn.onclick=fun1;
window.fun1();//打印出window對象
obj.fun1();//打印出Object對象
btn.onclick();//打印出button對象
}
</script>
總結：如果this在函數fun1內，函數fun1以哪個對象的屬性值的身份去執行，this就表示哪個對象
其他情況如果不容易判斷的話就實際測試一下：
示例代碼：
<input type="button" onclick="alert(this)"/>//打印出button對象
<input type="button" onclick="fun1()"/>//打印出window對象
十一、給一個事件註冊多個事件處理函數
1，註冊事件處理函數的方式會覆蓋直接編寫處理代碼的方式，而且同時註冊的多個處理函數也會發生覆蓋，
這就導致一個事件發生時我們只能做“一件事情”
2，為了可以給一個事件註冊多個事件處理函數，DOM提供了另外一種註冊方式：
addEventListener("事件名稱",處理函數);
示例代碼：
<script type="javascript">
div.addEventListener("click",function(){
alert("第三種處理函數方式")
});
</script>
特點：不會發生覆蓋，可以同時註冊相同的事件
註意：多次註冊同一個函數，效果只有一次
3，刪除一個處理函數
如果希望將來可以刪除某個註冊的處理函數，就應該拿到該處理函數的引用。
removeEventListener(事件名稱, 處理函數);
示例代碼：
<script type="javascript">
var fun1=function(){
alert("第三種處理函數方式");
};
div.removeEventListener("click",fun1});
</script>
十二、事件冒泡
1，由於HTML元素可以嵌套，就不可避免的出現當用戶執行一個動作，如點擊時，會有多個元素觸發點擊事件。
為了方便管理，不至於混亂，DOM提供了事件冒泡機制。
事件冒泡：當若幹嵌套的元素“同時”被觸發某個事件時，最內層元素的事件最先被觸發，事件依次向外傳遞。
示例代碼：
<script type="javascript">
window.onload=function(){
var div01 = document.getElementById("div01");
var div02 = document.getElementById("div02");
var div03 = document.getElementById("div03");
div01.onclick=function(){
alert("div01");
}
div02.onclick=function(){
alert("div02");
}
div03.onclick=function(){
alert("div03");
div03.stopProgagation();//取消事件冒泡
}
//當點擊最裏面的div03時，外層的div02和div01都會觸發事件，這就是事件冒泡
}
</script>
2，如果某刻希望取消該事件的冒泡，可以使用event.stopProgagation();
十三、鍵盤事件
keydown 鍵盤按鍵被按下
keyup 鍵盤按鍵被彈起
event事件對象的屬性：
event.keyCode 被按下的按鍵的整數編碼
十四、取消某些事件的瀏覽器默認動作
對於某些元素的特點事件，瀏覽器會有一個默認的動作，如超鏈接觸發點擊事件時頁面會跳轉、表單提交事件被觸發時變淡數據會被提交到服務器、鍵盤按下在輸入框輸入字符等
DOM提供了兩種方式來取消瀏覽器的默認動作：
1，在我們自己註冊的處理函數中執行event.preventDefault();
2,return false;
註意：取消事件的瀏覽器默認動作和取消事件冒泡是不同的概念
十五、焦點事件
focus 元素獲得焦點
blur 元素失去焦點
十六、表單事件
select input(text)、textarea裏的文本被選中時觸發
change input(text)、textarea的值改變時觸發
submit 表單提交時觸發(真正把數據提交到服務器前觸發)
十七、獲得一個元素的坐標的寫法
<script type="javascript">
var x = div02.offsetLeft;
var y = div02.offsetTop;
var parent = div02.offsetParent;
while(parent){
x += parent.offsetLeft;
y += parent.offsetTop;
parent parent.offsetParent;
}
</script>
如鵬網學習筆記（十）DOM