面试 考察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();