JS---DOM---part4 課程介紹 & part3 複習

来源:https://www.cnblogs.com/jane-panyiyun/archive/2019/12/10/12016427.html

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);

 


您的分享是我們最大的動力!

更多相關文章
  • 引言 在開發中台過程中 我們的原型中有很多表單,antd有表單組件,但是粒度比較細,就單純組件而言,無可厚非,但是在開發過程中,可能會造成代碼不夠聚合,有些表單公共邏輯無法提取,copy paste比較多,所以可以加以封裝,搞一個相容性和擴展性都契合項目本身的組件。 主要思路 我簡單查閱了一番資料, ...
  • 1:利用DOM獲取該 div 的 ID,然後清空該DIV的內容(如果你需要接著裡面的內容添加可不要清空);需要註意點是清空最好用“ empty() ”; 2: 把 async設成true ,否則又一條警告的錯誤,這條錯誤導致你的內容顯示不出來;下麵就是警告的錯誤 3:就是添加HTML了。 具體代碼如 ...
  • 註:本文非本人原著;原文作者: 黃卉 《js去除空格12種方法》 ...
  • css3 實現右箭頭→ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .divtest{ position: absolute; top: ...
  • 1. 綁定事件的相容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEventListener(type,fn,false); }else if(element.attach ...
  • 解綁事件 註意:用什麼方式綁定事件, 就應該用對應的方式解綁事件 1.解綁事件 對象.on事件名字=事件處理函數 >綁定事件 對象.on事件名字=null; //1 對象.on事件名字=事件處理函數 綁定事件 my$("btn").onclick = function () { console.lo ...
  • 總結綁定事件的區別: addEventListener(); attachEvent() 相同點: 都可以為元素綁定事件 不同點: 1.方法名不一樣 2.參數個數不一樣addEventListener三個參數,attachEvent兩個參數 3.addEventListener 谷歌,火狐,IE11 ...
  • 群聊版 安裝 pipinstallgevent-websocket 視圖 #-*-coding:utf-8-*- importjson fromflaskimportFlask,request,render_template fromgeventwebsocket.handlerimportWebS... ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...