【前端知識體系-JS相關】JS-Web-API總結

来源:https://www.cnblogs.com/fecommunity/archive/2019/11/21/11908767.html
-Advertisement-
Play Games

DOM操作的常用API有哪些？DOM事件級別有哪些（DOM0-2事件）？ ...


2.1 DOM操作

2.1.1 DOM的本質是什麼？

<!-- DOM樹：二叉樹 -->
    /*
    <?xml version="1.0" encoding="UTF-8">               // 告訴瀏覽器以哪一種類型進行解析
    <node>
        <child />
    </node>
     */

    <!DOCTYPE html>                                      // 以html類型進行解析文檔內容
    <html>
        <body>

        </body>
    </html>

2.1.2 DOM操作的常用API有哪些？

節點查找API

  1. document.getElementById ：根據ID查找元素，大小寫敏感，如果有多個結果，只返回第一個；
  2. document.getElementsByClassName ：根據類名查找元素，多個類名用空格分隔，返回一個 HTMLCollection 。註意相容性為IE9+（含）。另外，不僅僅是document，其它元素也支持 getElementsByClassName 方法；
  3. document.getElementsByTagName ：根據標簽查找元素， * 表示查詢所有標簽，返回一個 HTMLCollection 。
  4. document.getElementsByName ：根據元素的name屬性查找，返回一個 NodeList 。
  5. document.querySelector ：返回單個Node，IE8+(含），如果匹配到多個結果，只返回第一個。
  6. document.querySelectorAll ：返回一個 NodeList ，IE8+(含）。
  7. document.forms ：獲取當前頁面所有form，返回一個 HTMLCollection ；

節點創建API

  1. createElement創建元素
  2. createTextNode創建文本節點
  3. cloneNode 克隆一個節點
  4. createDocumentFragment

節點修改API

  1. appendChild
  2. insertBefore
  3. insertAdjacentHTML
  4. Element.insertAdjacentElement()
  5. removeChild
  6. replaceChild

節點關係API

  • 1、父關係API

parentNode ：每個節點都有一個parentNode屬性，它表示元素的父節點。Element的父節點可能是Element，Document或DocumentFragment；
parentElement ：返回元素的父元素節點，與parentNode的區別在於，其父節點必須是一個Element元素，如果不是，則返回null；

  • 2、子關係API

children ：返回一個實時的 HTMLCollection ，子節點都是Element，IE9以下瀏覽器不支持；

childNodes ：返回一個實時的 NodeList ，表示元素的子節點列表，註意子節點可能包含文本節點、註釋節點等；

firstChild ：返回第一個子節點，不存在返回null，與之相對應的還有一個 firstElementChild ；

lastChild ：返回最後一個子節點，不存在返回null，與之相對應的還有一個 lastElementChild ；

  • 3、兄弟關係型API

previousSibling ：節點的前一個節點，如果不存在則返回null。註意有可能拿到的節點是文本節點或註釋節點，與預期的不符，要進行處理一下。

nextSibling ：節點的後一個節點，如果不存在則返回null。註意有可能拿到的節點是文本節點，與預期的不符，要進行處理一下。

previousElementSibling ：返回前一個元素節點，前一個節點必須是Element，註意IE9以下瀏覽器不支持。

nextElementSibling ：返回後一個元素節點，後一個節點必須是Element，註意IE9以下瀏覽器不支持。

元素屬性型API

1、setAttribute 給元素設置屬性：
2、getAttribute
3、hasAttribute

樣式操作API（面試考點）

  • 1、直接修改元素的樣式
elem.style.color = 'red';  
elem.style.setProperty('font-size', '16px');  
elem.style.removeProperty('color');
  • 2、動態添加樣式規則
var style = document.createElement('style');  
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';  
document.head.appendChild(style);

  • 3、classList獲取樣式屬性

    [!NOTE]
    瞭解dom節點樣式(classList)的remove, add, toggle, contains, replace等方法的使用。

  • 4、window.getComputedStyle
    通過 element.sytle.xxx 只能獲取到內聯樣式，藉助 window.getComputedStyle 可以獲取應用到元素上的所有樣式，IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);

2.1.3 DOM節點的attr和proerty的區別

// proprty------>>>獲取nodeName和nodeType（property實際上就是JS對象的一個屬性）如：text : 3(#text), p : 1(p)
    console.log(pList[0].nodeName);         // p
    console.log(pList[0].nodeType);         // 1
// attribute------>>> 獲取一個HTML標簽的屬性信息（設置和修改）
    var a = document.getElementsByTagName('a')[0];
    console.log(a.getAttribute('data-origin'));
    console.log(a.getAttribute("href_name"));           // 可以給一個HTML標簽設置任意的屬性名稱，無論這個屬性內部是否存在
a.  setAttribute('sex', 'male')
// 區別：
// (JS對象&HTML標簽)property實際上是一個普通JS對象本身的基本屬性，但是attribute實際上是一個HTML標簽上面的屬性信息

[!NOTE]
區別：(JS對象&HTML標簽)property實際上是一個普通JS對象本身的基本屬性，但是attribute實際上是一個HTML標簽上面的屬性信息

2.2 BOM操作

2.2.1 如何檢測瀏覽器的類型？

var ua = navigator.userAgent;
    var isChrome = ua.indexOf('Chrome');
    console.log('is Chrome?', isChrome > 0, navigator.userAgent);
    console.log('電腦屏幕大小：', screen.width, screen.height)

2.2.2 如何拆解URL的各個部分？

// location
    console.log(location.href);                 // 完整的url地址，http://localhost:8080/JS-Professional/begin/02-%E5%9F%BA%E7%A1%80%E8%BF%9B%E9%98%B6/01-%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0%E8%BF%9B%E9%98%B6.html?_ijt=i8ctmkc87dvh03tdaf51rn5v1i
    console.log(location.protocol)              // http/https
    console.log(location.host, location.hostname)                  // www.52tech.tech
    console.log(location.pathname);             // host之後的全部內容，JS-Professional/begin/02-%E5%9F%BA%E7%A1%80%E8%BF%9B%E9%98%B6/01-%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0%E8%BF%9B%E9%98%B6.html
    console.log(location.search);               // search就是？之後的全部內容，?_ijt=i8ctmkc87dvh03tdaf51rn5v1i（包括？）
    console.log(location.hash);                 // #後面的內容（包括#）

2.3 事件操作

2.3.1 編寫一個通用的事件監聽函數

    function bindEvent(ele, type, selector, fn){
        if (fn == null) {
            fn = selector;
            selector = null;
        }

        // addEventListener 的最後一個參數預設是false, 表示的是事件冒泡，自下向上去捕獲事件，true：表示事件捕獲，表示事件自外向里的方式
        ele.addEventListener(type, function(e){
            if (selector) {
                // 使用的是代理的方式的話
                if (e.target.matches(selector)){            // 這裡需要去判斷當前點擊的那個對象是不是我點擊的那個對象
                    fn.call(e.target, e);
                }
            } else {
                // 不使用代理的話
                fn(e);
            }
        });
    }


    // 這裡表示對這個div1 內部的所有的a標簽使用事件冒泡
    bindEvent(document.getElementById('div4'), 'click', 'p', function (e) {
        console.log(this.innerHTML + 'hahaah')
    })
版本2：
/**
     * 實現一個通用的事件綁定函數（代碼簡潔，減少了瀏覽器的占用）
     * @param element
     * @param type
     * @param selector
     * @param fn
     */
    function bindEvent(element, type, selector, fn) {
        // if (fn === null || fn === undefined)        // 這裡可以直接優化為fn == null
        if (fn == null){
            // 只有3個參數的話
            fn = selector;
            selector = null;
        }

        element.addEventListener(type, function (e) {
            var target;
            // 如果selector有的話，說明此事element就是一個代理
            if (selector) {
                target = e.target;
                // 如果當前的target滿足這個選擇器的話
                // 如果元素被指定的選擇器字元串選擇，Element.matches()  方法返回true; 否則返回false。
                // document.getElementById('div1').matches('div')    true
                // matches裡面的參數實際上是一個HTML標簽：a, p, div …………， 內容也是不區分大小寫的，有點類似於nodeName 或者nodeType 這樣的判斷
                if (target.matches(selector)){
                    // 修改this的指向
                    fn.call(target, e);
                }
            }else {
                fn(e);
            }
        });
    }

2.3.2 描述事件冒泡的流程

[!NOTE]
"DOM2級事件”規定的事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。首先發生的是事件捕獲，然後是實際的目標接收到事件，最後階段是冒泡階段。

  • 事件冒泡：
    按照DOM樹形結構向上冒泡(p --- >>> div --- >>> body --- >>> document),
  • 事件捕獲
    （document—>—>—>的順序進行傳播的）

2.3.3 對於一個無線下拉圖片的頁面，如何給每一個圖片綁定一個事件

// 代理（div3裡面的所有a標簽都需要進行事件的監聽）
    var div3 = document.getElementById('div3');
    bindEvent(div3, 'click', function (e) {
        e.preventDefault();
        e.stopPropagation()
        // 可以獲取真實觸發的那個元素
        var target = e.target;
        console.log(target.nodeName, target.nodeType);      // 每一種頁面標簽實際上都有一個自己專屬的nodeName
        // 這裡的目的主要是用於過濾，只處理a標簽的事件處理
        if ('A' === target.nodeName) {
            //  如果當前點擊的a標簽就是自己
            alert(target.innerHTML)
        }
    })

2.4 Ajax操作

2.4.1 手動編寫一個ajax，不依賴第三方庫

2.4.2 跨域的幾種實現方式以及底層的實現原理

  1. 伺服器端的使用：response.setHeader(Access-Control-Allow-Origin, "http://www.baidu.com, http://www.52tech.tech")允許跨域
  2. 使用JSONP

2.4.3 JSONP的實現原理

[!NOTE]
跨域：瀏覽器有同源策略，不允許ajax訪問其他域介面

  • 跨域條件：協議、功能變數名稱、埠，有一個不同就是跨域

可以跨域載入資源的3個標簽：

<img src="">, <link href="">, <script src="">
  • img用途：主要用於打點統計，統計網站可能是其他域
  • link, script用途：可以使用CDN，可以使用其他域
  • script用途：可以用於JSONP

2.4.3.1 跨域註意事項:

  1. 所有的跨域請求都必須經過信息提供方的允許才可以獲取
  2. 如果未經允許就可以直接獲取，就是瀏覽器的同源策略出現漏洞

2.4.3.2 瀏覽器端實現（提前定義一個回調函數）

//封裝一個jsonp請求的函數
  function query(opt) {
      let str = ""
      for (let key in opt) {
          str += key + "=" + opt[key] + "&"
      }
      return str
  }
  //設置預設回調函數的名字
  const defaultOptions = {
      callbackName: "callback"
  }
  function jsonp(url, opt, options = defaultOptions) {
      //參數解析  URL為訪問的介面 opt為傳播的數據  option 為接受參數的回調函數
      return new Promise((resolve, reject) => {
          //判斷下這個？是不是存在
          let index = url.indexOf("?");
          url += index != -1 ? query(opt) : "?" + query(opt);
          url = url + `${options.callbackName}=${options.callbackName}`;
          //首先創造一個標簽 帶有src的
          const scriptDom = document.createElement("script");
          //設置其src屬性
          scriptDom.setAttribute("src", url);
          //在window系統上創建一個回調函數用來接受數據
          window[options.callbackName] = (res) => {
              //在接受到了參數動態刪除這個script節點和window上面的方法
              delete window[options.callbackName];
              document.body.removeChild(scriptDom)
              //接受成功後調用resolve
              if (res) {
                  resolve(res)
              } else {
                  reject("伺服器暫沒有獲取到數據")
              }
          }
          //動態創建script標記，錯誤的監聽
          scriptDom.addEventListener('error', () => {
              delete window['jsonpCallback'];
              document.body.removeChild(script);
              reject('伺服器載入失敗！');
          });
          document.body.append(scriptDom)
      })
  }

2.4.3.3 後端實現

const url = require("url")

router.get("/api", (req, res, next) => {
  //將script標簽的src的URL請求轉成對象
  const opj = url.parse(req.url, true).query;
  //然後原理就是調用這個回調函數來進行傳參
  let {
    callback
  } = opj;
  //如果這個回調函數存在證明是jsonp請求
  if (callback) {
    let resault = JSON.stringify({
      code: 1,
      msg: "express框架傳回去的參數"
    });
    res.send(`${callback}(${resault})`)
  }
})

2.5 本地存儲

  1. 存儲量，只有4kb
  2. 所有的http請求都會帶有cookie，會直接影響獲取資源效率
  3. API，document.cookie

localstorage

  1. localstorage.setItem(key, value);localstorage.getItem('key');
  2. 存儲量5MB

  3. sessionStorage：會話級別

    [!WARNING]
    【坑】IOS safari的隱藏模式下，使用localStorage.getItem('key') 會報錯，建議使用try{}catch(e){} 來實現可以防止報錯


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

-Advertisement-
Play Games
更多相關文章
  • MySQL資料庫：數據的概念
    基本定義 數據:是資料庫總存儲的基本對象 定義:描述客觀事物的符號記錄 種類:數字、文字、圖形、圖像、聲音等 資料庫：DB 存儲數據的集合 資料庫管理系統：DBMS 用戶和操作系統之間的一層數據管理軟體 科學地組織和存儲數據、高效地獲取和維護數據 資料庫系統：DBS 電腦系統中引入資料庫後的系統 ...
  • Redis & memcached PK
    redis是一個key-value存儲系統。和Memcached類似，它支持存儲的value類型相對更多，包括string(字元串)、list(鏈表)、set(集合)、zset(sorted set --有序集合)和hash（哈希類型）。這些數據類型都支持push/pop、add/remove及取交 ...
  • spark利用yarn提交任務報:YARN application has exited unexpectedly with state UNDEFINED
    spark用yarn提交任務會報ERROR cluster.YarnClientSchedulerBackend: YARN application has exited unexpectedly with state UNDEFINED! Check the YARN application lo ...
  • 資料庫遷移導致Unknown character set: 'GBK' 應用異常
    https://blog.csdn.net/u013415591/article/details/82692242https://blog.csdn.net/gx_1_11_real/article/details/81066336 遷移之前沒這個問題，原來遷移後沒將lower_case_table ...
  • MySQL學習——事務
    MySQL學習——事務 摘要：本文主要學習了MySQL資料庫的事務操作。 概念 什麼是事務 事務是一組邏輯處理單位，可以是執行一條SQL語句，也可以是執行幾個SQL語句。 事務用來保證數據由一種存儲情況變為另一種情況，組成事務的各個單元要麼都執行成功，要麼都執行失敗。 為什麼使用事務 如果只是簡單的 ...
  • MySQL資料庫優化技巧有哪些？
    轉自：https://xushanxiang.com/2019/11/mysql-optimization-tips.html ...
  • 解決Android killer APK 編譯失敗，無法繼續下一步簽名
    報錯特征 自己使用AndroidStudio生成了一個Demo App，用來測試Androd killer的反編譯的功能，結果報錯了，報錯信息如下： 解決方式 解決方式一 刪除報錯文件 參考：https://www.52pojie.cn/thread 1029058 1 1.html 根據這個大佬的 ...
  • iOS核心動畫高級技巧-1
    1. 圖層樹 圖層的樹狀結構 巨妖有圖層，洋蔥也有圖層，你有嗎？我們都有圖層 -- 史萊克 Core Animation其實是一個令人誤解的命名。你可能認為它只是用來做動畫的，但實際上它是從一個叫做Layer Kit這麼一個不怎麼和動畫有關的名字演變而來，所以做動畫這隻是Core Animation ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類