面试 考察js基础不能不会的内容(第五天)

  • 面试 考察js基础不能不会的内容(第五天)已关闭评论
  • 20 次浏览
  • A+
所属分类:Web前端
摘要

基于 DOM 树结构,事件会顺着触发元素向上冒泡点击一个div,会一级一级向父级、爷级元素上冒泡,这个点击事件不仅能被这个div捕捉到,也能被他的父级、爷爷级…元素捕捉到


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