定时-间歇

作用：每隔一段时间，需要自动执行一段代码。
开启定时器：setTimeout(函数，间隔时间)，开启定时器后，每隔一段时间，就会执行这个函数，这个函数可以是匿名函数，也可以是具名函数，如果是具名函数，调用时不需要加括号。
关闭定时器：clearTimeout(timerId)。

定时器返回的是一个id数字，关闭定时器时，接受的是同一个id值。如果程序里面有定时器，一定是所有的代码执行完之后，才去执行定时器里面的内容。

DOM

给DOM添加事件监听

事件监听的三要素：

1. 事件元素：需要获取的DOM
2. 事件：以什么方式触发，比如点击（click）
3. 事件要触发的函数：表示做什么事情

给DOM绑定事件有两种形式，
第一种，DOM0版本，on，语法是：事件源.on事件=function(){}
第二种，DOM2版本，addEventListener，语法：事件源.addEventListener(事件，事件处理函数)

例子

// 获取元素 
let btn=document.querySelector('button');
// 事件监听
btn.addEventListener('click',function(){
    alert('我被点击了')
})

事件类型

鼠标事件

1. click
2. mouseover——鼠标悬停
3. mouseout——鼠标移出
4. mouseenter——鼠标进入
5. mouseleave——鼠标移出

焦点事件

1. focus——获得焦点
2. blur——失去焦点

键盘事件

1. keydown——键盘按下
   2.keyup——键盘抬起

文本事件

1. input——用户输入

回调函数

把一个函数当做参数传给另一个参数，前者就是回调函数，后者被称为主函数。
例如
例子一：定时器

function  fn(){
        console.log('我是回调函数')
}
setInterval(fn,1000)
// setInterval是主函数，fn是回调函数

例子二：

box.addEventListener('click',function(){
      console.log('我是回调函数')
})

关于this

this是函数内部特殊的变量，代表着当前函数所处的环境。
this的指向：谁调用，this就指向谁。

DOM节点的操作

查找节点

父节点
语法：子节点.parentNode或者子节点.parentElement
返回值是最近一级父节点，如果没有就返回null

子节点
语法：父元素.children
返回值是一个伪数组，包含所有符合条件元素的节点。

兄弟节点
语法：

// 上一个兄弟
元素对象.nextElementSibling
// 下一个兄弟
元素对象.previousElementSibling

新增节点

创建节点

一般的情况是，先在内存中创建一个节点，然后插入到目标节点中。创建的节点一般是双标签。
语法：document.createElement（'标签名'）

追加节点

插入到某元素的父元素的最后一个子元素的位置
语法：父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面
语法：父元素.insertBefore(要插入的元素,在哪个子元素前面)

克隆元素
语法：元素.cloneNode(布尔值)
输出结果：

1. 默认接收的值为false；
2. 如果为true，则代表克隆时，会包含后代一起克隆，这种情况为深克隆，不光复制标签的结构，也会复制内容；
3. 如果为false，则代表克隆时，不包含后代节点，只有它自己。这种情况为浅拷贝，只会复制标签的结构，不会克隆标签内部的内容。

删除节点

语法：

// 1
父元素.removeChild(要删除的元素)
// 2
元素.remove()

注意：

1. 只能是父子关系的元素，才能用第一种删除；
2. 删除节点和隐藏节点（display：none）是有区别的，前者表示从HTML中删除节点，后者处理后的节点还是存在的；

时间对象

获取时间

获取当前时间
语法：let date=new Date()
获取指定时间
语法：let date=new Date('1949-10-1')
获取时间对象的方法

1. 年份——getFullYear()
2. 月份——getMouth()
3. 月份中的某一天——getDate()
4. 星期——getDay()
5. 小时——getHours()
6. 分钟——getMinutes()
7. 秒——getSeconds()

时间戳

什么是时间戳？
是指1970年01月01日00时00分00秒（格林威治时间）起至现在的毫秒数，它是一种特殊的计量时间的方式。

获取时间戳的方式？
方式一：getTime
语法：

// 实例化
let date=new Date()
// 获取时间戳
console.log(date.getTime())

方式二：简写new Date()
语法：

console.log(+new Date())

方式三：使用Date.now()
语法：

console.log(Date.now())

注意：

1. 方式一和方式二可以返回指定时间的时间戳；
2. 第三种方式只能得到当前的时间戳；

如果将时间戳转换成正常的时间？
通过时间戳获取当前的时间：
new Date(时间戳)

通过计算得到具体的事件戳：

1. 通过时间戳得到的是毫秒，需要转化为秒，再计算；
2. 转换公式如下：

d=parseInt(总秒数/60/60/24) //  计算天数
h=parseInt(总秒数/60/60%24)  //  计算小时
m=parseInt(总秒数/60%60)  //  计算分数
s=parseInt(总秒数%60)  //  计算秒数

重绘和回流

首先介绍浏览器是如何进行页面渲染的？（步骤）

1. 解析（Parser）HTML，生成DOM树(DOM Tree)；
2. 同时解析（Parser） CSS，生成样式规则 (Style Rules)；
3. 根据DOM树和样式规则，生成渲染树(Render Tree)；
4. 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小），影响了元素的布局；
5. 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制，不会改变元素的位置和大小；
6. Display: 展示在页面上；

回流：当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。

重绘：由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定会引起回流，而回流一定会引起重绘。什么操作会引起回流？

1. 页面的首次刷新；
2. 浏览器的窗口大小发生改变；
3. 元素的大小或位置发生改变；
4. 改变字体的大小；
5. 内容的变化（如：input框的输入，图片的大小）；
6. 激活css伪类 （如：:hover）；
7. 脚本操作DOM（添加或者删除可见的DOM元素）；

本质：影响到布局，就会有回流。

事件对象

这个对象包含相关事件触发的相关信息，在事件绑定的回调函数的第一个参数就是事件对象，它记录了触发对象的信息，命名为e，或者event、ev。
拿到它的方法很简单：

元素.addEventListener('click',function(e){
       console.log(e)
})

事件对象的属性

1. type——获取当前的事件类型
2. clientX/clientY——获取光标对于浏览器可视窗口左上角的位置
3. offsetX/offsetY——获取光标对于当前的DOM元素左上角的位置
4. pageX/pageY——距离body左上角的位置
5. key——用户按下的键盘的值，按键的字面意思

事件流

事件流包括事件捕获和事件冒泡，事件捕获是从祖先到自己，事件冒泡是从自己到祖先。

触发捕获和冒泡的语法

DOM元素.addEventListener(事件类型，事件处理函数，是否触发捕获机制)

阻止事件冒泡

事件对象.stopPropagation()

鼠标经过事件和事件冒泡的关系

• mouseover和mouseout有冒泡效果
• mouseenter和mouseleave没有冒泡效果

元素的默认行为和阻止默认行为

默认行为，比如，a链接的默认行为是跳转。阻止元素默认行为的语法：e.preventDeafult()。

事件注册的两种方式（以click事件为例）

第一种，DOM0，on
on事件只能绑定一个对应的事件，后面会覆盖。解绑的方式很简单，元素对象.onclick=null。

第二种，addEventListener
addEventListener可以绑定同一个对应的事件，后面不会被覆盖。解绑时，使用removeEventListener，此时需要注意调用具名函数，不能调用匿名函数。

// 解绑的语法：事件类型、函数调用，否是捕获
removeEventListener('click',myClick)

// 例子
function myClick(){
  alert('你好')
}
addEventListener('click',myClick)
removeEventListener('click',myClick)

事件委托

原理是，事件类型、函数调用，否是捕获。怎么实现的？事件对象.target触发真正的元素。
节点的三要素：

1. nodeName：大写的标签名
2. nodeValue：元素是null
3. nodeType：元素是1

滚动事件

事件名：scroll
给整个页面添加滚动事件：window.onscroll=function(){}

获取页面的滚动距离

注意，滚动距离不加单位

window对象

方法：距离页面左上角滚动的距离

1. window.pageXOffset
2. window.pageYOffset

上面的方法只能获取，不能修改

元素对象

获取方法：距离相关元素左上角滚动的距离

1. 元素.scrollLeft
2. 元素.scrollTop

获取html元素的方法：document.documentElement

加载事件

load事件

作用是，监听页面内容是否加载完毕，完毕之后，才会执行。
语法：这个事件是window对象的

window.onload=function(){
xxx
}

图片资源、其他链接资源，必须等到html标签关闭之后才会加载。

DOMContentLoaded事件

这个事件是加给document的，当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载。加载结构完成之后，执行。
语法：

document.addEventListener('DOMContentLoaded',function()){}

元素的大小和位置

scroll家族

获取滚动元素的宽和高

• scrollWidth
• scrollHeight

获取元素的滚动距离

• scrollLeft
• scrollTop

offset家族

获取元素自身的宽高，包含元素自身设置的宽高、padding、border

• offsetWidth
• offsetHeight

获取最近的有定位的父元素（定位父级元素）的位置

• offsetLeft
• offsetTop