建设网站免费模板seo思维
这个阶段两天也能看完
目录
壹_DOM-获取元素
00、获取DOM元素（根据CS选择器来获取DOM元素）
01、修改元素内容
02、修改CSS
03、H5自定义属性
04、定时器
贰_DOM-事件基础
00、事件监听
01、事件类型
02、事件对象
03、环境对象
04、回调函数
叁_DOM-事件进阶
00、事件流
01、事件解绑
02、阻止默认行为
03、其他事件类型
04、元素的尺寸与位置（属性）
肆_DOM-节点操作
00、日期对象
01、节点操作
02、M端事件
03、JS插件
伍_BOM-操作浏览器
00、JS执行机制
01、location对象的常用属性和方法
02、navigator对象的常见属性
03、history对象的常见方法
04、本地存储
05、利用方法map()和join()拼接字符串
陆_正则表达式
00、语法
01、元字符（特殊字符）
02、修饰符
壹_DOM-获取元素
00、获取DOM元素（根据CS选择器来获取DOM元素）
1>选择匹配的第一个元素
document.querySelector('css选择器')【返回CSS选择器匹配的第一个对象】
2>选择匹配的多个元素
document.querySelectorAll('css选择器')【返回CSS选择器匹配的对象集合】
3>css选择器补充知识（优先级逐渐升高）
type选择器：标签名
class选择器： .类名
id选择器：#i
01、修改元素内容
obj.innerText=值【只识别文本】
obj.innerHTML=值【会识别标签】
02、修改CSS
1>通过style属性：obj.style.样式属性=值
2>通过类名(className)
obj.className=css类名
【让对象的类指向写好的CSS代码；css类名会覆盖之前的类名，css类名可以有多个】
3>通过classList【避免直接通过类名修改会覆盖之前的类】
obj.classList.add('类名')【追加类】
obj.classList.remove('类名')【删除类】
obj.classList.toggle('类名')【切换类，有则删、无则加】
03、H5自定义属性
1>html5推出自定义属性：data-
2>查询标签自定义属性：
obj.dataset或obj.dataset.属性名【后者的属性名为data-后面的部分】
04、定时器
1>开启定时器
setInterval(函数名,间隔时间)【间歇函数】
setTimeout(回调函数，等待时间)【延时函数】
【间隔时间以毫秒为单位1s=1000ms】
【定时器返回一个id数字】
2>关闭定时器【关闭指定id的定时器】
clearInterval(定时器id)
clearTimeout(定时器id)
贰_DOM-事件基础
00、事件监听
obj.addEventListener('事件类型',要执行的函数)
【addEventListener可多次绑定一个对象的同一事件，对象发生一个事件会产生多个效果】
01、事件类型
1>鼠标事件
click鼠标点击
mouseenter鼠标经过
mouseleave鼠标离开
2>焦点事件（表单获得光标）
focus获得焦点
blur失去焦点
3>键盘事件
Keydqwn键盘按下触发
Keyup键盘抬起触发
4>文本事件
input用户输入事件
02、事件对象
事件绑定的函数的第一个参数就是事件对象
一般命名为event、ev、e
03、环境对象
定义：函数内部特殊的变量 this，指向一个对象
原则：谁调用，this就是谁
04、回调函数
定义：将函数 A做为参数传递给函数 B，称函数A为回调函数
叁_DOM-事件进阶
00、事件流
事件流定义：事件执行过程中的流动路径，分为捕获阶段和冒泡阶段
事件冒泡：一个元素触发事件后，会依次向上调用所有父级元素的同名事件
阻止冒泡：obj.stopPropagation()【阻止上级触发事件；写在监听函数中，obj用e替代】
01、事件解绑
obj.removeEventListener('事件类型',要执行的函数)【匿名函数无法解绑】
02、阻止默认行为
obj.preventDefault()【写在监听函数中，obj用e替代】
03、其他事件类型
1>等待加载：load等待对象加载完毕
2>元素滚动：scroll滚动
获取位置：属性scrollLeft和scrollTop表示内容往左(上)滚出去看不到的距离
获取html对象：document.documentElement【网页滚动，是html对象在滚动】
3>页面尺寸：resize页面尺寸改变
04、元素的尺寸与位置（属性）
client-系列属性（不包含边框）
offset-系列属性（包含边框）（eg. offsetTop上边距）
肆_DOM-节点操作
00、日期对象
1>实例化：const date=new Date()
2>常用方法：
.getFullYear()【年份】
.getMonth()【0~11】
.getDate()【一个月中的第几天】
.getDay()【0~6】
.getHours/Minutes/seconds()【0~23/59】
3>时间戳：
定义：1970年1月1日0时0分0秒至今的毫秒数，是一种特殊的计时方式
获取方式：时间戳=+new Date()【实参传入时间可以获取指定时间戳】
01、节点操作
1>DOM节点类型：元素节点（重点）、属性节点、文本节点
2>查找节点
父节点：子节点.parentNode
子节点：父节点.children【获得所有元素节点，返回一个伪数组】
兄弟节点：节点.nextElementSibling、节点.previousElementSibling【下(上)一个兄弟节点】
3>增加节点
创建节点：document.createElement('标签名')
追加节点：
父节点.appendchild(要插入的元素)【追加在父节点的子结点队尾】
父节点.insertBefore(要插入的元素,在哪个元素前)【追加在指定子结点前面】
克隆节点：节点.cloneNode(布尔值)【默认为false，代表克隆时不包含后代节点和标签内容】
4>删除节点：父元素.removeChild(要删除的元素)
02、M端事件
touch触屏
-start【手指触摸到一个 DOM 元素时触发】
-move【手指在一个 DOM 元素上滑动时触发】
-end【手指从一个 DOM 元素上移开时触发】
03、JS插件
Swiper滑动特效插件
伍_BOM-操作浏览器
00、JS执行机制
同步：任务按顺序执行
异步：任务并发执行
01、location对象的常用属性和方法
location.href【URL地址，对其赋值可跳转页面】
location.search【地址中的参数，?后的部分】
location.hash【地址中的哈希值，#后的部分】
location.reload()【刷新页面，传入参数true表示强制刷新】
02、navigator对象的常见属性
通过userAgent属性检测浏览器的版本与平台
03、history对象的常见方法
.back()
.forward()
.go()【参数为正数表示前进】
04、本地存储
1>注意：本地存储只能存储字符串
2>常用方法
localStorage.setltem(key,value)【存/改】
localStorage.getItem(key)【取】
localStorage. removeItem(key)【删】
3>存储复杂数据类型
JSON.stringify(复杂数据类型)【将复杂数据类型转换成JSON字符串,再存储到本地】
JSON.parse(JSON字符串)【将JSON字符串转换成复杂数据类型】
05、利用方法map()和join()拼接字符串
1>map
定义：遍历处理数组数据，返回新数组
使用：arr.map(function(ele,index)return 修改后的数组元素)
2>join
定义：把数组全部元素转换成一个字符串
使用：arr.join(字符串)【字符串作为返回值各元素间分隔符，默认逗号分隔】
陆_正则表达式
00、语法
1>声明：const 变量=/正则表达式/
2>匹配
变量.test(被检查字符串)【返回布尔值】
变量.exec(被检查字符串)【返回数组】
01、元字符（特殊字符）
1>边界符【必须用什么开头/结尾】
^e【以e开头】
e$【以e结尾】
2>量词【表示重复次数】
*【重复次数∈[0,+∞)】
+【重复次数∈[1,+∞)】
?【重复次数∈[0,1]】
{n}【重复次数=n】
{n,}【重复次数∈[n,+∞)】
{n,m}【重复次数∈[n,m]】
3>字符类
[] 匹配字符集合【匹配括号中任意一个字符即可】
[a-z]【表示全部小写字母】
[^a-z]【表示除了小写字母以外的字符】
预定义:某些常见模式的简写方式【大写表示取反】
\d：[0-9]
\w：[A-Za-z0-9_]
\s：[\t\r\n\v\f]
4>精确匹配
^e$【以同一个e开头结尾】
^e+量词$【以e开头e结尾，中间不能有别的】
02、修饰符
1>语法：/正则表达式/修饰符
2>分类：
i：匹配时字母不区分大小写
g：匹配所有满足正则表达式的结果