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

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){} 來實作可以防止報錯

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/98413.html

標籤：Html/Css

上一篇：檢測值是否存在（??）（Freemarker的null值處理）

下一篇：2.元素的顯示與隱藏

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