part4 課程介紹 事件 1. 綁定事件的區別 2. 移除綁定事件的方式及區別和相容代碼 3. 事件的三個階段 4. 事件冒泡 5. 為同一個元素綁定多個不同的事件,指向的是同一個事件處理函數 6. 百度的大項目 7. BOM 8. 定時器 9. DOM加強,多個幾個好玩的案例 part3 複習 ...
part4 課程介紹
事件 1. 綁定事件的區別 2. 移除綁定事件的方式及區別和相容代碼 3. 事件的三個階段 4. 事件冒泡 5. 為同一個元素綁定多個不同的事件,指向的是同一個事件處理函數 6. 百度的大項目 7. BOM 8. 定時器 9. DOM加強,多個幾個好玩的案例
part3 複習
節點:
節點:頁面中所有的內容都是節點(標簽,屬性,文本:文字,空格,換行) 文檔：document---頁面中的頂級對象 元素:頁面中所有的標簽, 標簽---元素--對象(通過DOM的方式來獲取這個標簽,得到了這個對象,此時這個對象叫DOM對象) 節點的屬性:作用:為了將來獲取很多節點,得到節點中的標簽(元素),識別節點中的標簽元素 節點的類型:1標簽節點,2屬性節點,3文本節點 nodeType:節點的類型,1---標簽節點,2----屬性節點,3---文本節點 nodeName:標簽節點--大寫的標簽名字,屬性節點---小寫的屬性名字,文本節點---#text nodeValue:標簽---null,屬性---屬性的值,文本---文本內容 if(node.nodeType==1&&node.nodeName=="P")獲取節點及元素的代碼(下麵呢)
元素的創建
三種元素創建的方式 1. document.write("標簽代碼及內容"); 如果在頁面載入完畢後創建元素.頁面中的內容會被幹掉 2. 父級對象.innerHTML="標簽代碼及內容"; 3. document.createElement("標簽名字");得到的是一個對象, 父級元素.appendChild(子級元素對象); 父級元素.inerstBefore(新的子級對象,參照的子級對象); 移除子元素 父級元素.removeChild(要幹掉的子級元素對象);事件的綁定: 為同一個元素綁定多個相同的事件 三種方式: 1. 對象.on事件名字=事件處理函數 如果是多個相同事件註冊用這種方式,最後一個執行,之前的被覆蓋了 my$("btn").onclick=function(){}; 2. 對象.addEventListener("沒有on的事件名字",事件處理函數,false); my$("btn").addEventListener("click",function(){},false); 3. 對象.attachEvent("有on的事件名字",事件處理函數); my$("btn").attachEvent("onclick",function(){});
//為任意的一個元素,綁定任意的一個事件 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEventListener(type,fn,false); }else if(element.attachEvent){ element.attachEvent("on"+type,fn); }else{ element["on"+type]=fn; } }
獲取節點及元素的代碼
//獲取當前節點的父級節點 console.log(my$("uu").parentNode); //獲取當前節點的父級元素 console.log(my$("uu").parentElement); //獲取當前節點的子級節點 console.log(my$("uu").childNodes); //獲取當前節點的子級元素 console.log(my$("uu").children); //獲取當前節點的第一個子級節點 console.log(my$("uu").firstChild); //獲取當前節點的第一個子級元素 console.log(my$("uu").firstElementChild); //獲取當前節點的最後一個子級節點 console.log(my$("uu").lastChild); //獲取當前節點的最後一個子級元素 console.log(my$("uu").lastElementChild); //獲取當前節點的前一個兄弟節點 console.log(my$("uu").previousSibling); //獲取當前節點的前一個兄弟元素 console.log(my$("uu").previousElementSibling); //獲取當前節點的後一個兄弟節點 console.log(my$("uu").nextSibling); //獲取當前節點的後一個兄弟元素 console.log(my$("uu").nextElementSibling);
