1.DOM常见的操作有哪些？
创建节点 creatElement
// 创建新的元素，接受一个参数，即要创建元素的标签名
const divE1 = document.creatElement('div')查询节点
querySelector() ；传入任务有效的css选择器，既可选中单个DOM元素
document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')querySelectorAll() ;
更新节点
innerHTML : 可以解析成HTML文本标签
innerText : 修改文本的值
textContent
style
添加节点
innerHTML
appendChild
insertBefore
setAttribute
const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值。
删除节点
删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的
removeChild把自己删掉
// 拿到待删除节点:
const self = document.getElementById('to-be-removed');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true
BOM对象有哪 Bom的核心对象是window，它表示浏览器的一个实例
- location
- navigator
- screen
- history
3.Javascript本地存储的方式有哪些？区别及应用场景？
关于cookie、sessionStorage、localStorage三者的区别主要如下：
存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
cookie 和 session 的区别
- cookie数据存放在客户端浏览器上，session数据放在服务器上；
- cookie不是很安全，别人可以分析本地的cookie进行cookie欺诈
- 性能上 session会一定时间内保存在服务器，当访问量增多，会比较占用服务器性能
- cookie保存的数据不能超4kb
4.浏览器输入url以后所经历的过程
- 先查找缓存，浏览器缓存，系统缓存，路由器缓存，如果有缓存就会直接显示页面内容
- 如果没有缓存则对域名解析，解析为IP地址
- 浏览器向服务器发起TCP链接，建立三次握手
- 握手成功后，向服务器发起http请求，请求数据包
- 服务器接受请求，将数据返回给浏览器
- 浏览器接受http响应，解析内容，显示页面
5.防抖 n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 （回泉水）
防抖与节流的本质上是优化高频率执行代码的一种手段，
const inputDOM = document.getElementById('hInput')
//用户输入完毕的时候，才发送一次http请求
function debounce(fn,delay){
let timer = null
return function(){
if(tiemr){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn()
},delay)
}
}
inputDOM.addEventListener('input',debounce(()=>{
console.log('发送搜索请求')
},400))
6.节流
一段时间内，只执行一次某个操作；过了一个段时间，还有操作的话，继续执行
const boxDOM = document.querySelector('.box');
//节流
function throttle(fn){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(()=>{
fn();
tiemr = null;
},delay)
}
}
boxDOM.addEventListener('drag',throttle(function(e){
console.log('test')
},1000)
7. JS 数组去重 ( 常见面试题 )
// 数组去重
let arr = [1, 4, 7, 2, 7, 8, 9, 3, 3, 5, 5, 6, 7, 3, 2];
function SingleArray(arr){
let newArr = [] ;
for(let i = 0;i<arr.length;i++){
//判断新数组是否存在当前元素arr[i]
if(newArr.indexOf(arr[i]) === -1){
//元素不存在
newArr.push(arr[i])
}
}
return newArr;
}
console.log(SingleArray(arr))