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

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

cookie
 最⼤存4k http请求会携带cookie，增加请求数据⼤⼩ document.cookie localStorage sessionStorage 最⼤存储5M http请求不携带 localStorage localStorage 本地永久存储，除⾮代码删除或⼿动删除 sessionStorage 数据只存在当前会话，浏览器关闭则清空

所有的跨域都必须经过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⽆视 "同源策略"

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