黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作
API:给程序元提供的一种工具，以便能够更轻松的实现想要完成的功能
Web APIs：浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
DOM简介：处理HTML或者XML内容和结构的接口
DOM树：document，element，node
获取元素：id,标签名，HTML5新增方法，特殊元素
getElementById();
getElementsByTagName()返回伪数组
element.getElementsByTagName("标签名")：注意（父元素必须是单个对象，获取的时候不包括父元素自己）
document.getElementsByTagName("标签")获取所有标签
新增获取方法：getEelmentgsByClassName(""),querySelector(“”)返回选择器的第一个元素对象；querySelectorAll()返回所有
获取body元素:document.body
获取html元素：document.documentElement
事件三要素：事件源，事件类型（onclick,onmouseover,onmouseout,onfocus,onblur,onmouseup,onmousemove,onmouseup,onmousedown），事件处理程序
获取元素，注册事件，处理程序
操作元素：element.innerText(从其实位置到终止位置，但它去除HTML标签，同时空格和换行也会去掉)，element.innnerHTML(起始到终止位置的全部内容，包括HTML标签，同时保留空格和换行)
普通盒子div
操作元素:type,value,disabled,checked,selected
样式属性操作：element.style行内样式；element.className
this.style.backgroundColor = 'purple'样式名驼峰命名法
.change{
css样式；
}
this.className='change'
保留原来的类名：
this.className= ‘first change’
排他思想：1、所有元素全部清除样式（干掉其他人）；2、给当前元素设置样式（留下我自己）；3、注意顺序不能颠倒，首先干掉其他人，在设置自己
获取自定义属性值：element.getAttribute(“属性”）
设置元素属性值：element.setAttribute("属性"，“值”）
移除：element.removeAttribute("属性”）
H5新增：element.dataset.属性/[‘属性’]（如果自定义属性里面有多个string的单词，我们获取的时候采取驼峰命名法）去掉data-的驼峰命名法
利用节点层级关系获取元素：利用父子节点关系获取元素；逻辑性强，但是兼容性稍差（更简单）nodeType,nodeValue,nodeName
parentNode(得到的是最近的父级节点)；childNodes(得到所有的子节点，包含元素节点，文本节点等);children(获取所有的子元素节点)返回伪数组
fistChild(第一个子节点 不管是文本节点还是元素节点);lastChild；firstElementChild;lastElementChild;（ie9才支持）
实际开发中：children["index"]
兄弟节点：nextSlibing 得到下一个兄弟节点，包括元素节点、文本节点；previousSibling ; nexElementSibling;previousElementSibing(获取下一个或上一个元素节点，存在兼容性问题);
创建节点元素节点：document.createElement（'标签名’）
添加节点：node.appendChild(child)类似于css 中的after伪元素；node.insertBefore(child,指定元素）在指定元素前面添加；
删除节点：removeChild（child）；阻止链接跳转（href="javascript:;"）或者添加javascript:void(0)
复制节点;node.cloneNode();注意（括号为空或里面是false 浅拷贝 只复制标签不赋值里面的内容），反之，则为深拷贝
三种动态创建元素：document.write(),当文档流执行完毕，则它会导致页面全部重绘;element.innerHTML;document.createElement();innerHTML 创建多个元素效率更高（不要拼接字符创，采取数组形式拼接），结构稍微复杂；createElement()创建多个元素效率稍微低一点点，但是结构更清晰
注册事件（绑定事件）：传统注册方式（利用on开头的事件onclick），缺点，一个元素对同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖全面注册的处理函数；方法监听注册事件（addEventListener（）或者attachEvent（）(ie9以前独有)）
例： btns.addEventListener('click',function(){
aler(22);
})；btns.attachEvent('click',function(){
aler(22);
})
删除事件（解绑事件）：传统注册方式（eventTarget.onclick = null）；方法监听注册（eventTarget.removeEventListener(type,listener[,urseCapture]）;eventTarget.detachEvent(eventNameWithOn,callback);
DOM 事件流：事件发生是会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流；捕获阶段（document，HTML，body，目标），当前目标阶段，冒泡阶段
js代码中只能执行捕获或者冒泡其中一个阶段
onclick 和attachEvent 只能得到冒泡阶段
addEventListener(type,listener[,userCapture]) 第三个参数如果是true，表示事件捕获阶段调用事件处理程序；如果是false(默认就是false），表示在事件冒泡阶段调用事件处理程序。
事件对象：event，写到侦听函数的小括号里面；事件对象只有有了事件才会存在，不需要我们传递参数；事件对象 是 我们事件的一系列相关数据的集合；可以自己命名，比如event，evt ，e;事件对象也有兼容性问题，e= e || window.event
target 和this的区别：e.target返回触发事件的对象；this 返回的是绑定事件的对象; 兼容性问题：vartarget =e.target || e.srcElement;跟this相似的属性 currentTarget
阻止默认行为：e.type返回事件类型；链接不跳转或者表单不提交 e.prevnetDefault()
阻止事件冒泡：stopPropagation（）或者cancelBubble = true；
事件委托：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
鼠标事件：禁止选中文字selectstart，contextmenu禁用右键菜单;
常用的键盘事件：onkeyup,onkeydown,onkeypress(不能识别功能键)
顺序:keydown ,keypress,keyup
keyCode:返回键的ASCII值
keyup 和 keydown 不区分字母大小写，keypress区分字母大小写
BOM（浏览器对象）：浏览器窗口进行交互的对象，核心是window；全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
页面加载事件：window.onload = function(){} 或者window.addEventListener('load',function(){});DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
调整窗口大小：onresize事件，window.innerWidth;做响应式布局
定时器：setTimeout（调用函数，延时事件毫秒），给定时器加标识符，回调函数；setInterval（回调函数，间隔时间），调用函数三种形式（直接写函数，写函数名，‘函数名（）’）
停止定时器：clearTimeout(timeoutID）；clearInterval()
this 指向：一般情况下this的最终指向的是那个调用它的对象
同步和异步：单线程和多线程
执行过程：同步任务（执行栈），异步任务（回调函数实现，普通事件，资源加载，定时器，回调函数放在任务队列）
js执行机制：事件循环
location对象：用于获取和设置窗体的URL，解析URL；location.href /host/port/pathname/search/hash
location常见方法：assign（）、replace（）（不能后退）、reload（）（参数为true，强制刷新）
navigator对象
history对象：与浏览器历史记录进行交互；back（）、forward（）、go(参数)前进后退功能，正数前进负数后退
offset(偏移量):获得元素距离带有定位父元素的位置；获得元素自身的大小（宽度高度）；返回的数值都不带单位；offsetParent/offsetTop/offsetLeft/offsetWidth/offsetHeight;只读属性
client:获取元素可视区的相关信息；clientTOp/clientLeft/clientWidth/clientHeight
立即执行函数：（function(){}）()或者（function（）{}（））；多个之间用分号隔开；里面所有的变量都是局部变量
scroll系列：scrollTop/scrollLeft/scrollWidth/scrollHeight
window.pageXOffset
mouseenter 事件 mouseleave 事件：没有冒泡
mouseover 事件mouseout 事件：有冒泡
动画：封装函数，obj目标对象 target目标位置
obj.timer可以给不同的元素指定不同的定时器
缓动动画：运动速度变慢；公式（目标值-现在的位置）/10;添加回调函数
节流阀
classList 返回元素的类名
add("类名")；remove（“类名”）；toggle('类名')切换类名
插件：fastclik、swiper、superslide、iscroll、zy.media.js
框架：bootstrap. vue/
本地存储：sessionStorage,生命周期为关闭浏览器窗口；在同一个窗口下数据可以共享；以键值对存储使用;localStorage,生命周期永久生效，可以多窗口共享；以键值对形式存储使用
存储数据：sessionStorage/localStorage.setItem(key,value)
获取数据：sessionStorage/~.getItem(key)
删除数据：sessionStroage/~.removeItem(key)
删除所有数据：sessionStorage/~.clear()
