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

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

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

節點創建API

createElement創建元素
createTextNode創建文本節點
cloneNode 克隆一個節點
createDocumentFragment

節點修改API

appendChild
insertBefore
insertAdjacentHTML
Element.insertAdjacentElement()
removeChild
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 跨域的幾種實現方式以及底層的實現原理

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

2.4.3 JSONP的實現原理

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

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

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

<img src="">, <link href="">, <script src="">

img用途：主要用於打點統計，統計網站可能是其他域
link, script用途：可以使用CDN，可以使用其他域
script用途：可以用於JSONP

2.4.3.1 跨域註意事項:

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

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 本地存儲

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

localstorage

localstorage.setItem(key, value);localstorage.getItem('key');
存儲量5MB
sessionStorage：會話級別

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