一 DOM-获取元素

DOM是操作页面文档，开发网页特效和实现用户交互。

document是DOM顶级对象

document.write()

1.1 获取DOM元素

CSS选择器来获取DOM元素

选择匹配的第一个元素：document.querySelector('css选择器')

console.dir(对象) ：用来输出对象格式数据

选择匹配的多个元素对象：document.querySelectorAll('css选择器')，获取到伪数组，类型Prototype是NodeList，不是Array

其他获取DOM元素方法

doument.getElementById('id')

doument.getElementsByClassName('类名')，此时不用加.,不是类选择器

doument.getElementsByTagName('标签名')

doument.getElementsByName('name')，通过name属性获取，如input标签有name属性

二 DOM-操作元素

元素.innerText：不解析标签，获取时只获取文本

元素.innerHTML：解析标签，获取时也获取标签

2.1 操作元素常用属性

href、title、src

对象.属性 = 值

2.2 操作元素样式属性

1、通过style属性操作元素样式

对象.style.样式属性= 值，一般都要加单位，这里用style属性设置的是行内样式，权重较高--适合修改很少的情况

Js中拼接字符串用``符号

2、通过类名（className）属性操作元素样式

对象.className = 'active' ，会把之前的类名替换成新值，一般用来获取类名，用处不大

3、通过classList操作元素样式

前面两个都是属性，这个是方法

对象.classList.add('类名')：追加指定类名

对象.classList.remove('类名')：移除指定类名

对象.classList.toggle('类名')：有则删除指定类名，没有添加指定类名

对象.classList.contains('类名') ：判断指定类名

以上不会影响已有类名。

注意，获取标签的后代，可以用标签对象的querySelector()方法，类似document

`li:nth-child(${random+1})` 选择第几个li，并且字符串中的参数是动态的，轮播图让小圆点消失变化：先删除原来的类名，再增加新的类名

2.3 操作表单元素属性

获取：DOM对象.属性

设置：DOM对象.属性=新值

value属性

type属性

属性选择器： [type="text"]

单选或复选按钮：checked

禁止使用表单：按钮类：disabled

下拉菜单，某一项是否被选中：selected ，选择器： select option:last-child

2.4 自定义属性

标准属性：id，class，title标签自带

自定义属性：html5中以data-自定义属性，在DOM对象上一律以dataset对象方式获取。

在标签上 定义 data-xxxx属性，获取在js中用对象的dataset获取对应xxxx的值。

三 定时器-间隔函数

开启定时器

const timerId = setInterval(函数，间隔时间) ，单位毫秒，间隔指定时间循环

关闭定时器

clearInterval(timerId)，所以可以控制循环次数和终止时机

四 事件基础

4.1 事件监听

定义

也叫事件绑定，事件注册，语法：

方式1：元素对象.addEventListener(‘事件类型’，事件处理函数)，不会同名覆盖

方式2：事件源.on事件类型= function(){} -- 老的实现方式，不好的是多个同样事件会覆盖

事件源：元素对象

事件类型：click等

回调函数：当作参数的函数，回头调用的函数，常用匿名函数实现

4.2 事件类型

这些事件可以手动调用的， 元素.click()

鼠标事件

click：点击

mouseenter：经过

mouseleave：离开

js调用鼠标的点击事件，主动执行点击事件方式：对象.click()，然后会执行这个对象绑定的click事件函数

let变量，可以在多个小括号里面服用，相当于类的属性。程序关闭和开启定时器，开启之前要先清一下比较稳妥

焦点事件

主要是表单元素

focus ， 对象.focus()[自动获取焦点]

blur

文本事件

input用户输入事件，表单value被修改时触发

键盘事件

keydown

keyup

注：opacity:0 透明度

4.3 事件对象

事件对象包含事件触发时的相关信息，包含属性和方法

语法：注册事件中，回调函数的第一个参数就是事件对象，一般命名为event， 元素.addEventListener('click',function(event){})

event属性：

key：键盘事件有值，当前按键的值

target：触发事件的元素

4.4 环境对象-this

基础：谁调用，this就是谁。直接调用函数相当于window.函数，this指的是window

排他思想：排除所有人，再给我自己加，核心原因是不知道下一个是谁

4.5 事件流

事件流指的是事件完整执行过程中的流动路径。当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。

捕获：当一个元素的事件被触发时，会从DOM的额根元素开始依次调用同名事件（从外到里，外指的是Document，里值得是最小的那个元素）

代码：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制true)

冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。addEventListener的第三个参数传false时，默认是冒泡false

阻止冒泡：把事件限制在当前元素内。语法：事件对象.stopPropagation()

事件委托：也称为事件委派、事件代理，原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务。实现方式：事件对象.target.tagName可以获得真正触发事件的元素

使用自定义属性 data-id=0 和事件对象.target.dataset.id 来处理索引问题，参考案例

mouseover 鼠标经过有冒泡 mouseenter没有

阻止默认行为：事件对象.preventDefault()

4.6 移除事件监听

也称为解绑事件。

移除L2事件监听：removeEventListener(事件类型，事件处理函数，[捕获或者冒泡阶段])，匿名函数无法解绑

移除L1事件监听：on事件方式，直接使用null覆盖就可以实现事件的解绑

4.7  其他事件

1、页面加载事件

加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件

事件名：

页面全部资源加载事件：load，给window加load事件，页面所有资源加载完执行，window.addEventListener('load',function(){});元素也可以

HTML元素加载事件：DOMContentLoaded事件，只要HTML标签加载完成了就执行

2、页面滚动事件

滚动条在滚动的时候持续触发的事件

事件名：

scroll：如window.addEventListener('scroll',function(){});元素也可以

document.documentElement-- 可以获取滚动的元素，document.documentElement.scrollLeft和scrollTop可以获取被卷去到的左侧和头部，就是被覆盖的部分，可读写

3、页面尺寸事件

会在窗口尺寸改变的时候触发事件，resize，如：window.addEventListener('resize',function(){});获取窗口宽高：clientWidth和clientHeight，为元素的可见部分，不含border和margin和滚动条，只是内容区域，元素也可以

4.8 元素尺寸与位置

元素大小：offsetWidth和offsetHeight，元素的宽高，不带单位，只读

元素位置：offsetLeft和offsetTop，元素距离自己定位父级元素的左、上距离，父级没定位则以浏览器文档为准，不带单位，只读

五 常见对象

5.1 日期对象Date

获取时间戳方式：getTime();Date.now(),+new Date('xxxxxx')，三种方式，第三种通用，可获取指定格式和时间的

5.2 节点操作

查找：

父节点：子元素.parentNode 获取父元素，最顶级是#document 

子节点：元素对象.children

兄弟节点：元素对象.previousElementSibling 前一个兄弟元素，元素对象.nextElementSibling 下一个兄弟元素

增加：

const span = document.createElement('span')

span.innerHtml('xxx)

const elemtent = document.querySelector('.div')

element.append(span)

element.prepend(span)

删除

真删除：element.remove() 删除element

六 移动端事件

touchstart

touchmove

touchend

七 插件

swiper：轮播图插件

alooyFlinger：轻量级手势事件，缩放滑动

如何使用插件

1、看官网介绍=》能完成哪些功能

2、找到需要的功能=〉研究一下实例

3、写demo=》自己去完成一些他提供的功能

4、应用在项目中

5、解决问题=〉面向百度mdn开发（关键词印象-》笔记，不停的try，直到解决）

八 BOM操作

8.1 window对象

浏览器对象模型，是最顶级对象，使用时可省略，如【window.】alert('xxx')，包括document、location等对象 

var声明的变量挂在window对象，let声明的不会

8.2 定时器-延时函数

setTimeout(回调函数，毫秒数)：延时函数，只执行一次，不阻塞后面的代码执行，相当于异步任务

setInterval(回调函数，毫秒数)：间歇函数

8.3 location对象

location它拆分并保持了URL地址的各个组成部分，是一个对象

href：属性，获取完整的URL，也可以赋值，用于地址的跳转

search：属性，？号后面的查询参数

hash：属性，#号后面的值

reload：方法，刷新当前页面，传true是强制刷新

8.4 navigator对象

该对象记录了浏览器自身的相关信息，常用的属性和方法：userAgent

8.5 history对象

主要管理历史记录，比如前进、后退，常见方法：，比如1，2，3，当前是2 。back【回到之前访问的页面】是到1，forward【前进】是到3，go方法传-1时1，1是3

8.6 本地存储

1、localStorage

作用：数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

特性：以键值对的形式存储，并且存储的是字符串，省略了window，有setItem，getItem，removeItem方法 

存放复杂格式，使用JSON.stringify方法转成字符串存，console出来是黑色的，对象json是蓝色的，使用的时候使用JOSN.parse方法转成对象

2、sessionStorage

confirm("xxx")：确认弹窗

alert("xxx"):提示信息

九 正则表达式

使用场景：匹配、替换、提取

定义： const reg = /规则/ 是个对象

使用：

匹配：reg.test(str) ，结果true/false

9.1 元字符

 1、边界符

^：表示匹配行首的文本

$：表示匹配行尾的文本

2、量词

量词用来设定某个模式重复次数

* 重复零次或更多次

+ 重复一次或更多次

？重复零次或一次

{n} 重复n次

{n,} 重复n次或更多次

{n,m} 重复n到m次

3、范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等待，用[]表示范围

[abc] [a-z]匹配单个字符;[^abc] 去反符，^写在[]里面是取反，写在外面是开始

另外[]是匹配单个字符，要重复，在[]后面加上量词，如 QQ号：/^[1-9][0-9]{4,}$/ 10000以上的数字

4、字符类

\d 匹配0-9之间的任一数字

\D 匹配所有0-9以外的字符

\w \W 字母、数字和下划线

\s \S 空格（包括换行符、制表符、空格符等）

9.2 替换和修饰符

replace 替换方法

字符串.replace(/表达式/修饰符,'替换的字符')

i：不区分大小写

g：匹配所有满足正则表达式的结果

注：小括号()代表一组正则，在replace中$1关键字等取出对应结果；｜ 是或的意思

如把手机号中间四位加星号，reg = /^(\d{3})\d{4}(\d{4})$/,  str.replace(reg,`$1${'*'.repeat(4)}$2`)

字符串.repeat(数字）将字符串重复多少次

插件：any-rule