WEB API
一、DOM：Document Object Model
1.相关
- 1.文档：一个页面可以称为文档
- 2.节点：页面中的所有内容
节点：1.标签–2.属性–3.文本–8.注释 - 3.元素：网页中的标签
- 4.文档元素（根元素）：文档的第一个元素
属性：标签的属性
2.级别
DOM(0-3) 我们正处于DOM1阶段
3.API
1.方法
1.查找
| 方法 | 注释 | 其他 |
|---|---|---|
| docunment.getElementById() | 获取单个元素 | |
| document.getElementsByTagName() | 获取所有相同标签的元素 | |
| document.getElementsByClassName() | 获取同个类型的元素 | 有兼容性问题 |
| document.getElementsByName() | 获取相同类的元素 | 有兼容性的问题 |
| document.querySelector() | 通过选择器来获取一个元素 | |
| document.querySelectorAll() | 通过选择器来获取多个元素 | |
| 子元素.parentElement=’’ | 通过子元素查找父元素 | |
| .children | 子元素 | |
| .nextElementSibling | 下一个兄弟元素 | |
| .previousElementSibling | 上一个兄弟元素 | |
2.添加
| 方法 | 注释 |
|---|---|
| docunment.write() | 局限性，只能写到body中 |
| innerHTML+=’’ | 动态添加多个元素，它是一个属性 |
| 1.document.createElement() | 创建单个元素 |
| 2.1.父元素.appendChild(子元素) | 在父元素后面添加子元素 |
| 2.2.父元素.insertBefore(子元素，位置) | 在父元素前面添加子元素 |
3.其他
| 方法 | 注释 |
|---|---|
| 父元素.removeChild(子元素) | 删除元素 |
| innerHTML=‘’ | 修改元素 |
| 1-1.cloneNode() | 复制节点 |
| 1-2.cloneNode(true) | 复制节点包括内容 |
| 2-父元素.appendChild(子元素 | 将复制的文档输出到网页 |
2.事件
1.概念：浏览器或者页面中瞬间发生的行为
2.三要素：
1.事件源：触发（被）事件的元素
2.事件类型：事件触发的方式
3.事件处理程序：事件被触发后要执行的代码
3.书写事件的位置
行内式：""
内嵌式：.function(){}
外联式
4.方式
1.触发事件的方式
1.on
1.方式：赋值的方式
2.语法：事件源.on+事件类型=function（参数e/even）{}
2.addEventListener
1.方式：调用函数绑定
2.语法：事件源.addEventListener（‘事件类型’，function（）{}）
3.优点：函数可以多次调用，不会覆盖
4.缺点：低版本浏览器不支持
3.attchEvent
1.方式：调用函数绑定
2.语法：事件源.attchEvent（‘on+事件类型’，function（）{}）
3.优点：低版本浏览器可以多次调用
4.缺点：不支持主流浏览器
封装示例：
function myEvent(element,type,fn){
if(element,addEventListener){
element.addEventListener(type,fn)
}else if(element.attachEvent){
element.attachEvent('on'+type,fn);
}
}
myEvent(document,'click',function(){
alert('所有浏览器都可以兼容1')
})
2.解绑事件
1.事件源.on+事件类型=null
2.事件源.removeEventListener(‘事件类型’,fn)
示例：
var btn = document.querySelector('#btn')
function fn() {
alert('这是一个警示框');
btn.removeEventListener('click',fn);
}
btn.addEventListener('click',fn)
3.事件源.detachEvent(‘on+事件类型’,fn)
3.事件类型
1.点击
click:单击
dblclick:双击
2.鼠标
mouseover:鼠标移入
mouseout:鼠标移出
mousedown:鼠标按下
mouseup:鼠标弹起
mousemove:鼠标移动
3.表单
focus:获取焦点
blur:失去焦点
4.键盘
keydown:键盘按下
keyup:键盘弹起
4.事件对象
1.可视区坐标(配合固定定位使用)
clientX
clientY
2.页面坐标(配合绝对定位使用)
pageX
pageY
3.键盘坐标
keyCode
which
5.事件目标
1.将事件委派给父级元素
2.在父级事件处理函数内部用e.target判断标签名称
3.在判断语句内部写效果，当前点击的e.target
e.target.nodeName
e.target.className
6.事件冒泡： 时间目标出发后，会有向上传播的过程，
浏览器会依次询问父级有没有事件，如果有依次触发
7.事件捕获：在addEventListener添加参数
事件源.addEventListener(事件类型，事件处理程序，是否捕获传播)
5.相关
1.this：始终指代当前对象，正在执行的事件源
2.return false：阻止a标签的跳转执行
3.innerText/textContent与innerHTML
1.可以设置标签之间的纯文本内容
2.区别
| innerHTML的特点 | innerText/innerContent的特点 |
|---|---|
| 可以用来获取设置标签间的内容 | 可以用来获取或设置标签间的纯内容 |
| 可以用来获取标签间的内容,如果标签间只有纯文本内容的话，则会直接获取;如果标签内部还有嵌套子标签的话,则会将嵌套子标签一并获取到 | 在获取标签间内容的时候，如果标签间只有纯文本内容则可以直接可以,如果标签内部有嵌套子标签的话,则会忽略掉子标签直接获取文本内容 |
| 可以用来设置标签间的内容,如果设置的内容是纯文本内容的话,则是直接设置;如果要设置的内容里面有嵌套子标签的话,则会将标签的样式渲染出来,不会进行转义 | 在设置标签间的内容的时候,如果是纯文本内容,则是直接设置,如果设置的内容里面有标签的话，则会将标签进行转义 |
| 没有兼容性的问题，各浏览器都支持 | 有兼容性的问题 innerText是 谷歌和IE浏览器支持 textContent:谷歌和火狐浏览器支持,比如IE8不支持 |
3.封装：解决兼容性的问题
示例：
function getText(ele){
if(ele.innerText){
return ele.innerText;
}else {
return ele.textContent
}
}
function setText(ele,value){
if(ele.innerText){
ele.innerText = value;
}else {
ele.textContent = value
}
}
4.自定义属性
1.方法
.getAttribute()通过标签获取该属性
.setAttribute(属性名，属性值)通过标签设置属性值
.removeAttribute()删除属性
2.对于自定义添加的属性
不能通过点的方式直接获取
可以通过JS数值之后获取
二、BOM:Brown Object Model
1.浏览器
1.阻止浏览器默认行为
1.return false;——跳出函数
2.e.preventDefault();——阻止默认行为，依赖于事件对象
3.e.stopPropagation();——函数阻止事件冒泡，依赖于事件对象
4.e.cancelBubble=true;——属性阻止事件冒泡，低版本浏览器可以实现
2.定时器
1.单次定时器
1.设置：setTimeout()
2.清除clearTimeout()
2.多次定时器
1.语法
1.设置：setInterval()
2.清除clearInterval()
2.动画
1.缺陷：多次触发定时器
1.动画越来越快
2.动画闪动
2.解决：只启动一个定时器
1.把定时器添加到动画元素上
2.在启动之前清除
3.浏览器自动触发
1.window.function(){}
2.window.getComputedStyle()
1.获取元素的所有样式
2.返回值是一个对象
3.window.function(){}——浏览器滚动事件
4.window.function(){}
1.调整浏览器尺寸
2.window.function(){
document.documentElement.width（获取浏览器宽度）
document.documentElement.height（获取浏览器高度）
}
2.对象
1.location对象
1.href属性
1.获取浏览器地址栏
2.修改浏览器地址会直接跳转
2.assign/replace方法：跳转到新的页面
3.reload方法：重新加载页面
2.history历史对象
1.back()后退
2.forward()前进
3.go()
1.负值表示后退
2.正值表示前进
3.0表示刷新
3.screen浏览器屏幕
1.width屏幕宽度
2.height屏幕高度
4.navigator导航对象：nserAgent浏览器信息
应用场景：移动端软件的下载，IOS和安卓的操作系统软件是不一样的
可利用navigator.userAgent信息判断是什么操作系统
3.动画
1.获取数值(返回数值：只读属性)
1.offsetLeft：获取水平偏移值
2.offsetTop：获取垂直偏移值
3.offsetWidth：获取盒子宽度
4.offsetHeight：获取盒子的高度
5.offsetParent：获取定位的父级元素
2.参数
1.element
2.object
3.回调函数
3.开关思想：立flag
4.类型
1.匀速动画
2.变速动画
1.步长可变
2.减速动画公式：（目标值-当前值）/系数
JS高级
一、自定义对象
1.对象字面量
公式：function fn () {}
特点：不调用不会输出
2.对象构造函数
公式：var obj = new Object ()
工厂函数：function fn () {
var obj = new Object ();
return obj;
}
3.自定义构造函数
定义：1.首字母大写
2.通过this添加属性
3.new构造函数()，创建对象
示例：
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function () {
console.log(this)
}
var person = new Person('小白',18);
person.sayHi();
4.面向过程编程思维
1.步骤
2.分析效果有哪些
3.分析效果需要做什么，一步步按顺序书写
2.优点：简单好理解，速度快
3.缺点：如果JS需要操作的元素较多的时候就比较难维护
4.总结：小项目，需求比较简单的时候适合使用
5.面向对象编程思维
1.步骤
1.分析有哪些对象需要创建
2.分析对象的属性
3.分析对象的方法
4.定义创建对象的构造函数
5.调用构造函数实例对象，初始化属性
6.调用方法，实现某个功能
2.优点：后期有新属性、新功能，直接给创建对象的构造函数添加即可
3.缺点：步骤会繁琐一些，性能比面向过程慢
4.总结：大型项目、游戏项目，对象较多的时候适合
二、对象继承
1.组合继承
1.属性继承
1.借用构造函数
1.call：
1.语法：函数.call(对象,参数1,参数2,…)
2.特征： 1.能改变this的指向
2.能调用函数，后面可传入多个参数，用逗号隔开
2.apply：
1.语法：函数.apply(对象,[参数1,参数2,…])
2.特征： 1.能改变this的指向
2.也能调用函数，后面可以传入对象和数组
3.bind：
1.语法：函数.bind(对象,参数1,参数2,…)
2.特征： 1.能改变this的指向
2.复制一份，只是保存起来，但是没有调用
3.使用的时候可以多次调用
2.构造函数属性：函数.constructor
2.方法继承
原型对象
//继承原型函数的方法
函数.prototype=new 构造函数()；
//修正函数原型构造函数的属性指向问题
函数.prototype.construstor=函数；
2.原型链
1.定义：浏览器控制台，展开的每个原型对象，就相当于是链条的每个节点
2.查找步骤：
先从自身身上找
一直找原型对象
没有，返回underfined
三、this
1.口诀
1指向调用该函数的那个对象
2.只有调用的时候才知道指向
2.常见的场景
1.普通函数：指向window
2.事件处理函数：指向事件源
3.定时器调用函数：指向window
4.对象字面量：指向调用的对象
5.构造函数：构造函数的对象
6.构造函数的原型添加方：构造函数的对象
四、函数
1.函数作用域
1.定义：函数就是一个独立的作用域，函数内的变量和参数，都是局部变量
2.优点：
1.有独立的作用域，不容易出现冲突
2.使用完毕，JS会自动检测并回收释放内存
3.数据更安全
3.缺点：
数据需要在外部修改的时候不方便
2.函数类型
1.沙箱函数
1.价值：
1.内部一个独立作用域，不会和外界冲突
2.需要使用全局变量，可以赋值给window对象
2.闭包函数
1.价值：
1.把重要的数据包装起来
2.可修改局部变量的值
2.特征：
1.外函数嵌套里函数
2.外层函数常见局部变量
3.里层函数使用外层函数的变量
4.里层函数能在最外层触发
3.递归函数
1.特点
1.层层递进，逐次回归
2.如果只有递进没有回归就是陷入死循环
2.结构
1.函数自己调用自己（递进）
2.return跳出当前函数（回归）
3.应用场景
1.遍历文件目录树
2.对象或者数组的深拷贝
3.阶乘运算
4.函数的构造函数
示例：
var fn = new Function ('n','m','return 66');
console.dir(fn);
console.log(typeof fn);
fn();
五、正则表达式
1.功能：
按照一定的规则匹配字符串
2.创建方式
1./规则1|规则2…/——推荐使用
2.new PegExp(‘规则’,‘匹配模式’)
3.匹配模式
g(global) 全局匹配
i(ignore) 忽略大小写
4.方法
1.字符串替换：字符串.replace(规则，新的字符串)
2.检验规则：规则.test(字符串)
返回值：true or false
3.提取数据：字符串.match(正则对象)
返回结果是数组
5.语法
1.字符类型
\d和\D 数字字符和非数字
\w和\W 匹配所有数字字母包括下划线
\s和\S 匹配所有空格
2.字符个数(次数)
{n} n个
{n,m} n~m个
{n,} n~∞
便捷写法：? {0,1}
* {0,}
+ {1,}
3.功能符号
() 编组
[] 集合
[^] 非集合
^ 开始
$ 结束
| 或