01、描述事件冒泡的流程

基于 DOM 樹(shù)結(jié)構(gòu)，事件會(huì)順著觸發(fā)元素向上冒泡

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比興隆網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式興隆網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋興隆地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

點(diǎn)擊一個(gè)div，會(huì)一級(jí)一級(jí)向父級(jí)、爺級(jí)元素上冒泡，這個(gè)點(diǎn)擊事件不僅能被這個(gè)div捕捉到，也能被他的父級(jí)、爺爺級(jí)…元素捕捉到

例如：

<style>
   div{
      width:200px;
      height: 200px;
      background-color: red;
   }
style>
<div id="idv1">
     <button id="btn">點(diǎn)擊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() ; 阻止時(shí)間冒泡--->在子級(jí)

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

02、?限下拉的圖?列表，如何監(jiān)聽(tīng)每個(gè)圖?的點(diǎn)擊？

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

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

}
script>

03、你常?哪些BOM API？

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

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

location保存的是瀏覽器地址欄相關(guān)信息：獲取當(dāng)前窗口地址，可以改變當(dāng)前窗口的地址

        // location.protocal: 協(xié)議名 （http）
        // location.host: 主機(jī)名+端口號(hào) （aa.cn:8080）
        // location.hostname: 主機(jī)名 （aa.cn）
        // location.port: 端口號(hào) （8080）
        // location.pathname: 相對(duì)路徑 （ test/index.html）
        // location.search: ?及其之后的查詢字符串 （?username=shuai&kw=帥）
        // location.hash: #錨點(diǎn)名

history對(duì)象保存當(dāng)前窗口打開(kāi)后，成功訪問(wèn)過(guò)的url的歷史記錄棧，內(nèi)容不對(duì)開(kāi)發(fā)人員開(kāi)放，無(wú)法修改，只能進(jìn)行三個(gè)操作：

        前進(jìn)：history.go(1); //前進(jìn)一次
        后退：history.go(-1);
        刷新：history.go(0);

screen 對(duì)象包含有關(guān)用戶屏幕的信息。

     // window.innerHeight - 瀏覽器窗口的內(nèi)部高度
     // window.innerWidth - 瀏覽器窗口的內(nèi)部寬度 包含滾動(dòng)條        可視區(qū)寬高：
           document.documentElement.clientWidth 可視區(qū) 寬度 不包含滾動(dòng)條
           document.documentElement.clientHeight 可視區(qū) 高度 不包含滾動(dòng)條
        滾動(dòng)距離：           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");

創(chuàng)建節(jié)點(diǎn):

createElement

獲取元素:

childNodes

offsetParent

parentNode

插?元素（剪切）

appendChild

insertBefore

刪除元素

removeChild

05、?次性插?多個(gè)DOM節(jié)點(diǎn)，考慮性能

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