持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

一、DOM操作

dom节点操作的精髓其实就是增删改查，增：增加元素。删：删除元素。改：修改元素属性。查：查询元素。接下来，我们看看这部分语法你掌握的怎么样吧~

1.1 查：查元素

你会在什么时候使用document.querySelector('选择器') ?
- 获取单个元素
你会在什么时候使用document.querySelectorAll('选择器') ?
- 获取多个元素
querySelector和querySelectorAll有什么区别与注意事项
- 区别(能说多少是多少) ：一个返回DOM对象或null, 一个返回伪数组
- 注意事项：DOM对象可以直接使用dom语法，伪数组必须要通过下标取出dom对象才可以使用dom语法
你有没有注意到，querySelector的参数是一个选择器字符串,那你能分清楚id选择器和id名，类选择器与类名的区别吗？例如有一个盒子<div class="box"></div>
- 类名是： box
- 类选择器是： .box
其实，querySelector查元素是通过选择器来查询的（相当于一个通过身份证来找到一个人），dom中还有一种方式是通过节点关系来查询元素的。（相当于我想找你爸爸，我先找到你就知道你爸爸是谁了），那么你能说出几个常用的节点操作语法吗？
- 获取一个元素所有的子元素：元素.children
- 获取一个元素的父元素：元素.parentNode
- 获取一个元素的上一个元素(哥哥): 元素.previousElementSibling
- 获取一个元素的下一个元素(弟弟): 元素.nextElementSibling

1.2 查：查属性

你能说出元素属性和元素样式属性的区别？（从概念和语法这两个角度，也可以举例加深印象）
- 元素属性： html属性
- 样式属性： css属性
请说出innerText和innerHTML的区别？（经常会被问到这个的哟）
- innerText : 获取文本，无法解析标签样式
- innerHTML : 获取文本+标签。可以解析标签样式
在dom语法中，表单元素有一些属性与普通元素不一样，你能说出你说知道的表单元素独有属性有哪些吗？顺便说一下他们干啥的？
- value : 获取表单元素的值
- disabled ：是否禁用 true/false
- checked ：是否选中（用于radio与checkbox） true/false
- selected：是否选中（用于option） true/false

2. 改：改属性

在dom语法中，当我们想要修改元素样式的时候。其实有很多种方式，有的语法是用来修改一个样式的，有的语法是用来修改多个样式的。那么你知道什么场景用什么语法吗？
- 当我想要修改一个样式的时候使用：元素.style.样式名
- 当我想要修改多个样式的时候使用：元素.classList.add() / remove() / toggle()
dom元素的属性分为标准属性与自定义属性。它们区分的原则是：标准属性表示HTML与CSS原生的属性。自定义属性：我们自己像对象那样添加属性，这部分属性主要起到存储数据作用。例如一个删除订单按钮，我们只需要在这个按钮中存储对应的订单编号。这样点击删除按钮的时候，就知道用户到底想到删除哪一个订单了。（我说了这么多，其实重点就是：自定义属性作用是用来存储数据的），那么你能说出js中自定义属性的语法有哪几个方法吗？
- 设置自定义属性：元素.setAttribute('属性名',属性值)
- 获取自定义属性：元素.getAttribute('属性名')
- 移除自定义属性：元素.getAttribute('属性名')

3. 增：增加元素

你能说出dom语法中，哪个语法是用来给页面创建元素的吗？顺便说一下它的使用注意事项。
- document.createElement()
- 只会在内存创建，需要我们主动添加到dom树渲染
你能说出dom语法中，哪些语法是用来给页面添加元素的吗？（创建和添加的意思不同哟。创建指的是在内存中创建，添加指的是把这个元素添加到dom树，只有完成添加操作，我们才可以在页面看到元素渲染哟）
- 元素.appendChild(要新增的元素)
- 元素.insertBefore(要新增的元素，哪个元素的前面)

4. 删：删除元素

请说出dom中删除元素的语法及注意事项
- 元素。removeChild('子元素')
- 移除的元素一定要是自己的子元素

二、事件

事件是js处理用户交互的一种机制，一个事件必须由三个要素组成，你能说出组成一个事件的三要素吗？
- 事件源：什么元素
- 事件类型：什么时候
- 事件处理函数
事件处理函数在注册的时候是不会执行的，这个点非常重要的哟。既然事件处理函数在注册的时候并不会执行，那你能说出来，它会在什么样的情况下执行吗？
- 触发交互的时候：浏览器自动帮我们调用事件处理函数
- 主动调用事件处理函数： box.onclick()

你能说出一些常用的事件及他们执行的时机吗？（开放式回答，越多越好）

鼠标事件 onclick : 鼠标单击

  ondblclick:鼠标双击

 鼠标移入移出
onmouseover/onmouseout
	支持冒泡
推荐： onmouseenter/onmouseleave
	不支持冒泡
 onmousemove : 鼠标移动

键盘事件

oninput : 键盘输入
onfocus : 成为焦点
onblur : 失去焦点
onkeydown : 键盘按下
onkeyup : 键盘松开

其他事件

onscroll ： 滚动条事件
	给页面注册：  window.onscroll
	获取页面滚动距离： document.documentElement.scrollLeft / scrollTop
onresize：尺寸变化
	给页面注册：  window.onresize
	获取页面尺寸(视口)： document.documentElement.clientWidth / clientHeight

你能说出事件委托的原理吗？（高频面试题）

4.1 什么是事件委托呢？
- 给父元素注册事件，委托子元素处理
4.2 事件委托原理是什么呢？
- 事件冒泡
4.3 事件委托可以解决什么问题呢？
- 动态新增的元素注册事件
4.4 在开发中，什么时候我们会用到事件委托呢？
- 如果一个元素并不是一开始就有的，而是后面新增的元素。就需要使用事件委托。
你能说出事件流三个阶段吗？
- 捕获阶段
- 目标阶段
- 冒泡阶段

你能说出事件对象的常用属性或方法吗？（开放式回答，越多越好）

事件对象常用属性或方法

e.pageX / e.pageY

 获取鼠标触发点到页面左上角距离

e.key

 获取按键字符串  'Enter'

e.keyCode

 获取键盘ASCII码   enert键：13

e.preventDefault()

 阻止默认事件(行为)
 	a : 点击默认跳转到href属性链接
 	form : 点击默认跳转到action属性对应的链接

e.target

 事件触发源。 获取真正触发事件的子元素，用于事件委托

e.stopPropagation()

 阻止事件流 （冒泡 + 捕获都能阻止）

三、bom

你能说出window对象最常用的事件是什么吗？并且说说它的执行机制吧~
- window.onload : dom树+外部资源加载完毕后执行
你能说出location对象是干啥用的吗？顺便说说它的一些常用方法吧。说出你认为最常用的就可以了。
- 获取地址栏信息。 window.location.href
你能说出history对象是干啥用的吗？顺便说说它的一些常用方法吧。
- 获取历史记录信息
- history.back() : 回退
- history.forward() : 前进
你能说出navigator对象是干啥用的吗？顺便说说它的最重要的一个属性吧。
- 获取浏览器信息
- nabigator.userAgent
请说说localStorage与sessionStorage区别（面试必问点）
- localStorage ：硬盘存储。关闭网页之后数据还在
- sessionStorage ：内存存储。关闭网页之后数据消失
请说说延时函数setTimeout与间歇函数的区别（他们统称为定时器）
- setTimeout ：一次定时器。间隔之间执行一次后自动清除
- setInterval ：永久定时器。间隔之间永久重复执行，需要手动清除

四、案例编程思维

你认为自己写案例最大的瓶颈是什么？
你觉得自己想要突破这个瓶颈应该怎么做呢？如果这个不知道怎么回答，请继续往下看吧。
你觉得什么是思路呢，当你理解了这两个字的含义，你就会掌握提升自己编程思维正确的方向了哟！
1.你写案例之前，会先写思路吗？
2.你写了思路之后，会给你的代码添加注释吗？比如第一步我要做什么？第二步我要做什么？
3.当你尝试写了思路之后，你觉得写思路和没写思路敲代码最大的区别是什么呢？
4.当你写代码遇到bug的时候，你会用什么方式解决呢？你觉得这种方式好不好？（开放式回答，想到什么说什么）
5.你有没有发现在敲代码的时候，你会重复的犯相同的错误。那么你会怎么做，保证自己尽量不要在同一个问题上反复摔跤呢？（开放式回答，想到什么说什么）

一篇文章带你简单了解webapi