面試 考察js基礎不能不會的內容（第五天）

01、描述事件冒泡的流程

基於 DOM 樹結構，事件會順著觸發元素向上冒泡

點擊一個div，會一級一級向父級、爺級元素上冒泡，這個點擊事件不僅能被這個div捕捉到，也能被他的父級、爺爺級…元素捕捉到

例如：

<style>
   div{
      width:200px;
      height: 200px;
      background-color: red;
   }
</style>
<div id="idv1">
     <button id="btn">點擊</button>
</div>
let aBtn = document.getElementById("btn")
let oDiv = document.getElementById("div1")
aBtn.onclick = function (){
 console.log(0)
}
oDiv.onclick = function (){
 console.log(1)
}

event.stopPropagation() ; 阻止時間冒泡--->在子級

aBtn.onclick = function (event){
 event.stopPropagation()
 console.log(0)
}

02、⽆限下拉的圖⽚列表，如何監聽每個圖⽚的點擊？

<ul id="uli">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

<script>
let uli = document.getElementById("uli")
uli.onclick = function (event){
   if(event.target.nodeName === "LI"){  //  tagName
     console.log(event.target) // 獲取觸發的元素
   }

}
</script>

03、你常⽤哪些BOM API？

navigator對象包含了所有瀏覽器的配置信息

        // navigator.platform：操作系統類型；
        // navigator.userAgent：瀏覽器設定的User-Agent字元串。
        // navigator.appName：瀏覽器名稱；
        // navigator.appVersion： 瀏覽器版本；
        // navigator.language：瀏覽器設置的語言；
        // navigator.cookieEnabled: 判斷cookie是否啟用(true是啟用了)
        // navigator.plugins — 是個集合 判斷是否安裝了指定插件(plugin)

location保存的是瀏覽器地址欄相關信息：獲取當前視窗地址，可以改變當前視窗的地址

        // location.protocal: 協議名 （http）
        // location.host: 主機名+埠號 （aa.cn:8080）
        // location.hostname: 主機名 （aa.cn）
        // location.port: 埠號 （8080）
        // location.pathname: 相對路徑 （ test/index.html）
        // location.search: ?及其之後的查詢字元串 （?username=shuai&kw=帥）
        // location.hash: #錨點名

history對象保存當前視窗打開後，成功訪問過的url的歷史記錄棧，內容不對開發人員開放，無法修改，只能進行三個操作：

        前進：history.go(1); //前進一次
        後退：history.go(-1);
        刷新：history.go(0);

screen 對象包含有關用戶屏幕的信息。

     // window.innerHeight - 瀏覽器視窗的內部高度
     // window.innerWidth - 瀏覽器視窗的內部寬度 包含滾動條        可視區寬高：
           document.documentElement.clientWidth 可視區 寬度 不包含滾動條
           document.documentElement.clientHeight 可視區 高度 不包含滾動條
        滾動距離：           document.documentElement.scrollTop IE其他瀏覽器
           document.documentElement.scrollLeft //橫向

04、DOM有哪些常⽤的API？

獲取元素:

    // const oUl = document.querySelector("ul");
    // const oUl = document.querySelector("body #ul1");
    // const oUl = document.getElementsByTagName("ul")[0];
    // const oUl = document.getElementById("ul1");
    // const oUl = document.getElementsByClassName("ul1")[0];
    // const oUl = document.querySelectorAll("ul")[0];
    // const oDiv = document.getElementById("div1");
    // const oUl = oDiv.querySelectorAll("ul1");

創建節點:

createElement

獲取元素:

childNodes

offsetParent

parentNode

插⼊元素（剪切）

appendChild

insertBefore

刪除元素

removeChild

05、⼀次性插⼊多個DOM節點，考慮性能

        const oF = document.createDocumentFragment();

        function tinajia() {
            for (let i = 0; i < 100; i++) {
                let lis = document.createElement('li')
                oF.appendChild(lis)
            }
            uli.appendChild(oF)
        }
        tinajia();

06、attr和property的區別？

property 操作不體現到HTML結構中

attribute 會改變HTML結構

兩者都有可能引起DOM重新渲染

        let div1 = document.getElementById('div1')
        // property
        div1.index = 1;
        console.log(div1.index);
        // attr
        div1.setAttribute("index", "1");
        console.log(div1.getAttribute("index"));

07、cookie、localStorage、sessionStorage區別？

cookie
 最⼤存4k
 http請求會攜帶cookie，增加請求數據⼤⼩
 
document.cookie
 
localStorage
sessionStorage
 最⼤存儲5M
 http請求不攜帶 localStorage
 
localStorage
 本地永久存儲，除⾮代碼刪除或⼿動刪除
 
sessionStorage
 數據只存在當前會話，瀏覽器關閉則清空

08、跨域常⽤實現⽅式有哪些？

所有的跨域都必須經過server端允許與配合
【JSONP】
 $.ajax({
        url:"http://localhost:20002/MyService.ashx?
        callback=?", 
        dataType:"jsonp",
        jsonpCallback:"person",
        success:function(data){
            alert(data.name + " is a a" + data.sex);
        }
 });
【CORS】
 response.setHeader('Access-Control-Allow-Origin',
'http://baidu.com')
 response.setHeader('Access-Control-Allow-Headers', 'XRequested-With')
 response.setHeader('Access-Control-Allow-Methods',
'PUT,POST,GET,DELETE,OPTIONS')
 response.setHEader('Access-Control-Allow-Credentials',
'true')
同源策略：
 協議、功能變數名稱、端⼝三者必須⼀致
 載入圖⽚、css、js⽆視 "同源策略"

09、⼿寫⼀個簡易的 ajax

const url = "./data2.json";

      function ajax(url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("GET", url, true);
          xhr.send(null);
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
              } else if (xhr.status === 404) {
                reject(new Error("404。。。。"));
              }
            }
          };
        });
      }

      const oBtn = document.getElementById("btn1");
      oBtn.onclick = fn;
      async function fn() {
        try {
          let data = await ajax(url);
          console.log(data);
        } catch (err) {
          console.error(err);
        }
      }

      function ajax(url, fn) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true); // true 非同步  false 同步
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              // if (fn) {
              //   fn(JSON.parse(xhr.responseText));
              // }
              fn && fn(JSON.parse(xhr.responseText));
            }
          }
        };
        xhr.send(null);
      }