1.API和Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
主要针对浏览器做交互效果。
很多都是方法（函数）。
2.API
应用程序编程接口。
是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
3.DOM
文档对象模型。
可扩展标记语言的标准编程接口。
通过这些接口改变页面内容、结构和样式。
文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中的所有标签都是元素，DOM中使用element表示。
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示。
DOM把这三类内容都看作对象。
4.获取元素
1）根据ID获取：getElementById('xx')返回的是一个元素对象
*console.dir()打印返回的元素对象，可以查看属性和方法
2）根据标签名获取：getElementsByTagName()返回的是元素对象合集，以伪数组形式存储
*获取某个元素内部所有指定标签名的子元素
element.getElementsByTagName('标签名')
3）H5新增的获取方法（ie9以上）
1 getElementByClassName('类名')，以伪数组形式存储
2 querySelector('选择器')，返回指定选择器的第一个元素对象，如('.box')、('li')
3 querySelectorAll('选择器')，返回指定选择器的所有元素对象集合
4）获取特殊元素body、html等
1 document.body，返回body元素对象
2 document.documentElement，返回html元素对象
5.事件基础
事件是可以被js侦测到的行为：触发--响应机制
事件组成：事件源、事件类型、事件处理程序--事件三要素
1）事件源：事件被触发的对象，如按钮
2）事件类型：如何触发、什么事件，如鼠标点击、经过
3）事件处理程序：通过一个函数赋值的方式来完成，如btn.onclick = function(){}
执行事件的步骤
1）获取事件源：var div = document.querySelector('div')
2）注册事件（绑定事件）：div.onclick
3）添加事件处理程序（采取函数赋值形式）：div.onclick = function(){}
6.操作元素--引号''
1）修改获取元素内容
1 element.innerText：从起始位置到终止位置的内容，但去除html标签，同时空格和换行也去掉
2 element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
*两者都是可读写的
2）修改获取元素属性 src、href等等
1 获取元素
2 注册事件
3 处理程序
*如img.src = 'xx'
3）修改获取表单元素属性 type、value、checked、disabled、selected等等
1 获取元素
2 注册事件
3 处理程序
*如btn.disabled = true/input.value = 'xx'
4）修改获取样式属性
1 element.style：行内样式操作，样式少、功能简单使用
2 element.className：类名样式操作，修改类名，改成另一个类的样式
*JS里面的样式采取驼峰命名法，如fontSize、backgroundColor
*JS修改style样式操作，产生的是行内样式，CSS权重比较高
*className会直接更改元素的类名，会覆盖原先的类名，如果想保留原先类名，这样写'first change'，加个空格
5）获取设置自定义属性
获取
1 element.属性
2 element.getAttribute('属性')
区别：
*element.属性 获取内置属性值（元素本身自带的属性）
*element.getAttribute('属性') 主要获取自定义属性（标准）
设置
1 element.属性 = '值'
2 element.setAttribute('属性','值')
区别同上
移除
removeAttribute('属性')
*自定义属性的意义：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。
*H5规定自定义属性应以“data-”开头，避免歧义
*dataset是一个集合，里面存放了所有以data-开头的自定义属性，如div.dataset、div.dataset.index、div.dataset['驼峰命名法']，少用，一般用getAttribute
7.排他思想
如果有同一组元素，要某一个元素实现某种样式，需要用到循环的排他思想算法：
1）所有元素全部清除样式
2）给当前元素设置样式
3）顺序不能颠倒
应用：如tab页的切换
8.节点操作
1）简介
利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差
节点至少拥有nodeType、nodeName和nodeValue这三个基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3
2）节点层级
1 父级节点：node.parentNode，找不到返回null
2 子级节点：parentNode.childNodes，找到所有的子节点，包括元素节点、文本节点等，只需要获得元素节点需结合nodeType，比较麻烦不推荐使用
*推荐实际开发中使用的parentNode.children
3 第一个/最后一个子节点：firstChild/lastChild，获取的是所有类型的子节点
4 fistElementChild/lastElementChild，返回元素节点，有兼容性问题，ie9上才支持
*推荐children[0~n]
5 兄弟节点：
nextSibling，获取下一个兄弟节点，包括文本节点、元素节点
previousSibling
nextElementSibling/previousElementSibling--有兼容性问题
3）创建添加节点
创建：document.createElement('xx')
添加：node.appendChild(child)，在后面追加元素节点
添加2：node.insertBefore(child,指定元素)，在指定位置前添加
4）删除节点
node.removeChild(child)
*阻止连接跳转：href="javascript:;"
5）复制节点
node.cloneNode()，克隆之后要添加才显示
*如果括号为空或false，为浅拷贝，只复制标签不复制内容
*如果为true则深拷贝，内容也一起拷贝
9.动态创建元素的三种方式
1）document.write('html语句')
*如果页面文档流加载完毕，再调用这句话会导致页面全部重绘
2）element.innerHTML--时间较长，因为要拼接字符串
*将内容写入某个DOM节点，不会导致页面全部重绘
*不要拼接字符串，采取数组形式拼接，创建效率更高，结构稍微复杂
3）document.createElement()--时间较短
*创建多个元素效率稍低一点，但是结构更清晰
10.事件高级1
概念：
传统注册事件方式：注册事件的唯一性，后注册的事件覆盖先前注册的事件（on开头）
方法监听注册方式：IE9之前不支持此方法，同一个元素同一个时间可以注册多个监听器，按注册顺序依次执行（addEventListener()）
1）方式介绍：
eventTarget.addEventListener(type, listener[, useCapture可选])
type：事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false
事件侦听注册事件方式：
btn.addEventListener('click', function() {
//函数操作
})
2）注册/绑定事件（ie9以前才支持）
eventTarget.attachEvent(eventNameWithOn, callback)
方法将指定的监听器注册到eventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行
eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要用on
callback：事件处理函数，当目标触发事件时回调函数被调用
使用方式：
同上，但要有on
11.事件高级2
1）删除/解绑事件
1 传统方式
div.onclick = function() {//事件只执行一次就删除
xx
div.onclick = null
}
2 方法监听注册方式
方法一
eventTarget.removeEventListener(type, listener[, useCapture])
btn.addEventListener('click', fn)
function fn() {//事件只执行一次就删除
//函数操作
btn.removeEventListener('click', fn)
}
方法二
eventTarget.detachEvent(eventNameWithOn, callback)
同上，ie9之前才支持，要加on
12.DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
分为三个阶段：
1）捕获阶段 大->小
2）当前目标阶段
3）冒泡阶段 小->大
注意：
1）JS代码中只能执行捕获或者冒泡其中一个阶段
2）onclick和attachEvent只能得到冒泡阶段
3）捕获阶段：如果addEventListener第三个参数是true，那么执行捕获阶段 document->html->body->father->son
4）冒泡阶段（默认）：如果addEventListener第三个参数是false，那么执行冒泡阶段 son->father->body->html->document
5）onblur、onfocus、onmouseenter、onmouseleave没有冒泡
13.事件对象
1）简介：
event就是一个事件对象，事件对象只有有了事件才会存在，由系统自动创建。
事件对象是事件的一系列相关数据的集合，如鼠标点击包含鼠标坐标等。
事件对象可以自己命名，如event,evt,e。
事件对象有兼容性，ie678写法：window.event
兼容性写法：e = e || window.event
2）常见属性和方法：
e.target：返回触发事件的对象，标准
e.srcElement：返回触发事件的对象，非标准，ie678使用
e.type：返回事件类型，比如click、mouseover
e.cancelBubble：true阻止冒泡，非标准，ie678使用
e.returnValue：阻止默认事件（默认行为），非标准，ie678使用
e.preventDefault()：阻止默认事件（默认行为），标准
e.stopPropagation()：阻止冒泡，标准
14.事件委托（代理/委派）
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
作用：只操作一次DOM，提高程序的性能。
15.常用鼠标事件
onclick、onmouseover、onmouseout、onfocus、onblur、onmousemove、onmouseup、onmousedown
1）禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault()
})
2）禁止鼠标选中
document.addEventListener('selectstart', function(e) {
e.preventDefault()
})
3）鼠标事件对象
e.clientX/Y：返回鼠标相对于浏览器窗口可视区的X/Y坐标
e.pageX/Y：返回鼠标相对于文档页面的X/Y坐标 IE9+支持
e.screenX/Y：返回鼠标相对于电脑屏幕的X/Y坐标
16.常用键盘事件
1）常见事件
onkeyup：某个键盘按键被松开时触发
onkeydown：某个键盘按键被按下时触发
onkeypress：某个键盘按键被按下时触发，但功能键如ctrl、shift、箭头等不能识别
2）键盘事件对象
keyCode：keyup/keydown不区分大小写，keypress区分大小写
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。
主要针对浏览器做交互效果。
很多都是方法（函数）。
2.API
应用程序编程接口。
是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
3.DOM
文档对象模型。
可扩展标记语言的标准编程接口。
通过这些接口改变页面内容、结构和样式。
文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中的所有标签都是元素，DOM中使用element表示。
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示。
DOM把这三类内容都看作对象。
4.获取元素
1）根据ID获取：getElementById('xx')返回的是一个元素对象
*console.dir()打印返回的元素对象，可以查看属性和方法
2）根据标签名获取：getElementsByTagName()返回的是元素对象合集，以伪数组形式存储
*获取某个元素内部所有指定标签名的子元素
element.getElementsByTagName('标签名')
3）H5新增的获取方法（ie9以上）
1 getElementByClassName('类名')，以伪数组形式存储
2 querySelector('选择器')，返回指定选择器的第一个元素对象，如('.box')、('li')
3 querySelectorAll('选择器')，返回指定选择器的所有元素对象集合
4）获取特殊元素body、html等
1 document.body，返回body元素对象
2 document.documentElement，返回html元素对象
5.事件基础
事件是可以被js侦测到的行为：触发--响应机制
事件组成：事件源、事件类型、事件处理程序--事件三要素
1）事件源：事件被触发的对象，如按钮
2）事件类型：如何触发、什么事件，如鼠标点击、经过
3）事件处理程序：通过一个函数赋值的方式来完成，如btn.onclick = function(){}
执行事件的步骤
1）获取事件源：var div = document.querySelector('div')
2）注册事件（绑定事件）：div.onclick
3）添加事件处理程序（采取函数赋值形式）：div.onclick = function(){}
6.操作元素--引号''
1）修改获取元素内容
1 element.innerText：从起始位置到终止位置的内容，但去除html标签，同时空格和换行也去掉
2 element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
*两者都是可读写的
2）修改获取元素属性 src、href等等
1 获取元素
2 注册事件
3 处理程序
*如img.src = 'xx'
3）修改获取表单元素属性 type、value、checked、disabled、selected等等
1 获取元素
2 注册事件
3 处理程序
*如btn.disabled = true/input.value = 'xx'
4）修改获取样式属性
1 element.style：行内样式操作，样式少、功能简单使用
2 element.className：类名样式操作，修改类名，改成另一个类的样式
*JS里面的样式采取驼峰命名法，如fontSize、backgroundColor
*JS修改style样式操作，产生的是行内样式，CSS权重比较高
*className会直接更改元素的类名，会覆盖原先的类名，如果想保留原先类名，这样写'first change'，加个空格
5）获取设置自定义属性
获取
1 element.属性
2 element.getAttribute('属性')
区别：
*element.属性 获取内置属性值（元素本身自带的属性）
*element.getAttribute('属性') 主要获取自定义属性（标准）
设置
1 element.属性 = '值'
2 element.setAttribute('属性','值')
区别同上
移除
removeAttribute('属性')
*自定义属性的意义：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。
*H5规定自定义属性应以“data-”开头，避免歧义
*dataset是一个集合，里面存放了所有以data-开头的自定义属性，如div.dataset、div.dataset.index、div.dataset['驼峰命名法']，少用，一般用getAttribute
7.排他思想
如果有同一组元素，要某一个元素实现某种样式，需要用到循环的排他思想算法：
1）所有元素全部清除样式
2）给当前元素设置样式
3）顺序不能颠倒
应用：如tab页的切换
8.节点操作
1）简介
利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差
节点至少拥有nodeType、nodeName和nodeValue这三个基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3
2）节点层级
1 父级节点：node.parentNode，找不到返回null
2 子级节点：parentNode.childNodes，找到所有的子节点，包括元素节点、文本节点等，只需要获得元素节点需结合nodeType，比较麻烦不推荐使用
*推荐实际开发中使用的parentNode.children
3 第一个/最后一个子节点：firstChild/lastChild，获取的是所有类型的子节点
4 fistElementChild/lastElementChild，返回元素节点，有兼容性问题，ie9上才支持
*推荐children[0~n]
5 兄弟节点：
nextSibling，获取下一个兄弟节点，包括文本节点、元素节点
previousSibling
nextElementSibling/previousElementSibling--有兼容性问题
3）创建添加节点
创建：document.createElement('xx')
添加：node.appendChild(child)，在后面追加元素节点
添加2：node.insertBefore(child,指定元素)，在指定位置前添加
4）删除节点
node.removeChild(child)
*阻止连接跳转：href="javascript:;"
5）复制节点
node.cloneNode()，克隆之后要添加才显示
*如果括号为空或false，为浅拷贝，只复制标签不复制内容
*如果为true则深拷贝，内容也一起拷贝
9.动态创建元素的三种方式
1）document.write('html语句')
*如果页面文档流加载完毕，再调用这句话会导致页面全部重绘
2）element.innerHTML--时间较长，因为要拼接字符串
*将内容写入某个DOM节点，不会导致页面全部重绘
*不要拼接字符串，采取数组形式拼接，创建效率更高，结构稍微复杂
3）document.createElement()--时间较短
*创建多个元素效率稍低一点，但是结构更清晰
10.事件高级1
概念：
传统注册事件方式：注册事件的唯一性，后注册的事件覆盖先前注册的事件（on开头）
方法监听注册方式：IE9之前不支持此方法，同一个元素同一个时间可以注册多个监听器，按注册顺序依次执行（addEventListener()）
1）方式介绍：
eventTarget.addEventListener(type, listener[, useCapture可选])
type：事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false
事件侦听注册事件方式：
btn.addEventListener('click', function() {
//函数操作
})
2）注册/绑定事件（ie9以前才支持）
eventTarget.attachEvent(eventNameWithOn, callback)
方法将指定的监听器注册到eventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行
eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要用on
callback：事件处理函数，当目标触发事件时回调函数被调用
使用方式：
同上，但要有on
11.事件高级2
1）删除/解绑事件
1 传统方式
div.onclick = function() {//事件只执行一次就删除
xx
div.onclick = null
}
2 方法监听注册方式
方法一
eventTarget.removeEventListener(type, listener[, useCapture])
btn.addEventListener('click', fn)
function fn() {//事件只执行一次就删除
//函数操作
btn.removeEventListener('click', fn)
}
方法二
eventTarget.detachEvent(eventNameWithOn, callback)
同上，ie9之前才支持，要加on
12.DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
分为三个阶段：
1）捕获阶段 大->小
2）当前目标阶段
3）冒泡阶段 小->大
注意：
1）JS代码中只能执行捕获或者冒泡其中一个阶段
2）onclick和attachEvent只能得到冒泡阶段
3）捕获阶段：如果addEventListener第三个参数是true，那么执行捕获阶段 document->html->body->father->son
4）冒泡阶段（默认）：如果addEventListener第三个参数是false，那么执行冒泡阶段 son->father->body->html->document
5）onblur、onfocus、onmouseenter、onmouseleave没有冒泡
13.事件对象
1）简介：
event就是一个事件对象，事件对象只有有了事件才会存在，由系统自动创建。
事件对象是事件的一系列相关数据的集合，如鼠标点击包含鼠标坐标等。
事件对象可以自己命名，如event,evt,e。
事件对象有兼容性，ie678写法：window.event
兼容性写法：e = e || window.event
2）常见属性和方法：
e.target：返回触发事件的对象，标准
e.srcElement：返回触发事件的对象，非标准，ie678使用
e.type：返回事件类型，比如click、mouseover
e.cancelBubble：true阻止冒泡，非标准，ie678使用
e.returnValue：阻止默认事件（默认行为），非标准，ie678使用
e.preventDefault()：阻止默认事件（默认行为），标准
e.stopPropagation()：阻止冒泡，标准
14.事件委托（代理/委派）
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
作用：只操作一次DOM，提高程序的性能。
15.常用鼠标事件
onclick、onmouseover、onmouseout、onfocus、onblur、onmousemove、onmouseup、onmousedown
1）禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault()
})
2）禁止鼠标选中
document.addEventListener('selectstart', function(e) {
e.preventDefault()
})
3）鼠标事件对象
e.clientX/Y：返回鼠标相对于浏览器窗口可视区的X/Y坐标
e.pageX/Y：返回鼠标相对于文档页面的X/Y坐标 IE9+支持
e.screenX/Y：返回鼠标相对于电脑屏幕的X/Y坐标
16.常用键盘事件
1）常见事件
onkeyup：某个键盘按键被松开时触发
onkeydown：某个键盘按键被按下时触发
onkeypress：某个键盘按键被按下时触发，但功能键如ctrl、shift、箭头等不能识别
2）键盘事件对象
keyCode：keyup/keydown不区分大小写，keypress区分大小写
————学习笔记