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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/164492.html
標籤：JavaScript