javaScript@ WEB( API&&BOM)

WEB API

->获取元素
document.getElementById(id)->根据ID获取元素对象(★★★)

根据标签名获取元素（★★★）
document.getElementsByTagName('标签名') 
或者 element.getElementsByTagName('标签名')

H5新增获取元素方式
根据类名获取元素（★★）
document.getElementsByClassName('类名');

根据选择器获取元素（★★★）
根据选择器获取元素对象
document.querySelector('选择器');
根据选择器获取元素对象集合
document.querySelectorAll('选择器');
注意：选择器里面需要添加选择器符号

获取特殊元素（body，html）（★★）
获取body元素
document.body
获取html元素
document.documentElement

->事件基础（★★★）
事件三要素
事件源（谁）：触发事件的元素
事件类型（什么事件）： 例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

常见的鼠标事件
onclick    鼠标点击左键触发
onmouseover    鼠标经过触发
onmouseout    鼠标离开触发
onfocus    获取鼠标失去焦点触发
onblur    失去鼠标焦点触发
onmousemove    鼠标移动触发
onmouseup    鼠标弹起触发
onmousedown    鼠标按下触发

->操作元素
element.innerText 设置标签之间的内容
element.innerHTML 设置标签之间的内容
 获取内容时的区别：
 innerText会去除空格和换行，而innerHTML会保留空格和换行    
设置内容时的区别：
 innerText不会识别html，而innerHTML会识别

->常用元素的属性操作（★★★）
element.innerText ='' 设置标签中的文本内容 "
element.innerHTML = '' 设置标签中的内容   会去解析html标签 "
element.src = ''   设置图片的路径 "
element.title = ''  设置标题  鼠标悬停在图片上显示的提示文本 "
element.href = ''  修改a标签的href属性 "

获取属性的值
元素对象.属性名

设置属性的值
元素对象.属性名 = 值
 img.src = 'images/zxy.jpg';

表单元素的属性操作（★★★）
input.value = ''  设置表单中的内容 "
input.type = ''  设置表单的类型 "
input.disabled = true  是否禁用
input.checked = true  是否选中 

->样式属性操作（★★★）
element.style   行内样式操作
element.style.属性名 = ‘这里的属性名是驼峰命名法'
特点：  设置数量比较少的样式，权重高，可以接受变量

element.className  类名样式操作
element.className ='会覆盖原来的内容的'
特点： 设置数量比较多的样式，权重不高，不能接收变量

->排他思想（★★★）
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1) 所有元素全部清除样式（干掉其他人）
2) 给当前元素设置样式 （留下我自己）
3) 注意顺序不能颠倒，首先干掉其他人，再设置自己

 <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

// 第二种实现方法
<script>
    var btns = document.querySelectorAll('button');
    var st = null;
    for(var i=0;i<btns.length;i++){
        btns[i].onclick=function () {
            if(st){
                st.style.backgroundColor='';
            }
            this.style.backgroundColor='pink';
            st =this;
        }
    }

</script>

->自定义属性操作
获取属性值
element.属性获取属性值
element.getAttribute('属性'); 获取属性值

区别
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute('属性'); 获取自定义的属性

设置属性值
element.属性 = '值'  设置内置属性值
element.setAttribute('属性', '值');  设置自定义属性

区别
element.属性 = '值'  设置内置属性值
element.setAttribute('属性', '值');  设置自定义属性

移出属性
element.removeAttribute('属性');

H5自定义属性（★★★）

H5规定自定义属性data-作为自定义属性名的开头
例如: <div data-index = '1'></div>
或者用JS设置：  element.setAttribute('data-index',2);

取出H5自定义属性
兼容性获取    element.getAttribute('data-index');
H5新增  element.dataset.index  或者 element.dataset['index']  ie11才开始支持

->节点操作
父级节点（★★★）
node.parentNode;
parentNode 属性可返回某节点的父节点，注意是 最近的一个父节点
如果指定的节点没有父节点，那么返回null

子节点（★★）
所有子节点
parentNode.childNodes; 
返回包含指定节点的子节点的集合，该集合为即时更新的集合
注意： 返回值里面包含了所有的子节点，包括元素节点、文本节点等

子元素节点（★★★）
parentNode.children;
是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回

第1个子节点（★★）
parentNode.firstChild; 
返回第一个子节点，如果没有返回null，同样，是包含了所有的节点

最后1个子节点（★★）
parentNode.lastChild; 
返回最后一个子节点，如果没有返回null，同样，是包含了所有的节点

第1个子元素节点 （★★）
parentNode.firstElementChild;
返回第一个子元素节点，如果没有返回null

最后1个子元素节点（★★）
parentNode.lastElementChild;
返回最后一个子元素节点，如果没有返回null

如何想要第一个子元素节点（★★）
可以使用 parentNode.children[0];
如果想要最后一个子元素节点（★★）
可以使用 parentNode.children[parentNode.children.length-1];

->兄弟节点
上一个兄弟节点（★★）
node.nextsibling;
node.nextsibling; 返回当前元素下一个兄弟节点，找不到返回null

下一个兄弟节点（★★）
node.previouSibling;
node.previouSibling; 返回当前元素上一个兄弟节点，找不到返回null

创建节点（★★★）
document.createElement('tagName');
document.createElement('tagName'); 方法创建有 tagName 指定标签名称，这些元素之前是不存在的，
是根据我们需要动态生成的，所以我们也称为动态创建元素节点
 var li = document.createElement('li');

添加节点（★★★）
node.appendChild(child); 
node.appendChild(child); 方法将一个节点添加到指定父节点上，追加在末尾，类似于CSS里面的 after伪元素
 ul.appendChild(li);

node.insertBefore(child,指定元素);
node.insertBefore(child,指定元素);方法将一个节点添加到父节点指定的子节点前面
 ul.insertBefore(li, ul.children[0]);

删除节点（★★★）
node.removeChild(child);
node.removeChild(child);方法从node节点中删除一个子节点，返回删除的节点。
ul.removeChild(this.parentNode);
注意：只能是父亲删除儿子

复制（克隆）节点
node.cloneNode();
node.cloneNode(); 方法返回调用该方法的节点的一个副本，也称为克隆节点，拷贝节点
1) node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
2) node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

->创建元素的三种方式（★★★）
1) document.write();
2) element.innerHTML
3) document.createElement();

区别
- document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘
- element.innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
- element.innerHTML 创建多个元素效率更高，结构比较复杂
- document.createElement() 创建多个元素效率稍微低一点，但是结构更清晰，方便注册事件

->DOM 小结（★★★）

DOM 是文档对象模型，Document Object Model 简称DOM，是W3C组织推荐的处理可拓展标记语言的标准编程接口,
通过这些DOM结构我们可以改变网页的内容、结构、样式；

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建
- document.write();
- element.innerHTML
- document.createElement();

增加
- parent.appendChild();
- parent.insertBefore();

改
主要修改dom的元素属性
- 修改元素属性：src、href、title等
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value、type、disabled、checked、selected
- 修改元素样式：style、className

查
主要获取dom元素
- DOM提供的方法：getElementById、getElementsByTagName 不太推荐
- H5提供新方法：querySelector、querySelectorAll 提倡
- 利用节点操作获取：父节点（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）

属性操作
- setAttribute() 添加自定义属性
- getAttribute() 获取自定义属性值
- removeAttribute() 移除自定义属性

->事件高级
注册事件（2种方式）（★★★）
1) 传统方式注册
btn.onclick = function(){}
2) 添加监听
btn.addEventListener('click',fn,flag)
flag: false 代表的是事件冒泡
flag: true 代表是事件的捕获
3) （IE678支持）了解
btn.attachEvent('onclick',fn)

->删除事件（解绑事件）（★★★）
1) 传统方式删除事件
btn.onclick = null;
2) 监听方式
btn.removeEventListener('click',fn);
3) 了解
btn.detachEvent('onclick',fn)

->DOM 事件流会经历3个阶段（★★★） 
1) 捕获阶段-->从外到内一层一层进行传递，直到我们的目标对象
2) 目标阶段
3) 冒泡阶段-->从内到外，从目标对象向外一层一层进行冒泡

->事件对象（★★★）
什么是事件对象-->描述这一次事件的对象，里面封装了这次事件相关的数据信息

->事件对象的属性（★★★）
e.target  获取触发事件的对象
e.type   获取事件类型

e.target 和 this 的区别
- this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
- e.target 是事件触发的元素。

常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象，
而target指向的是子元素，因为他是触发事件的那个具体元素对象。

->阻止默认行为（★★★）
e.preventDefault();
在传统方式注册的，我们可以直接return false

->阻止事件冒泡（★★★）
事件冒泡本身的特性，会带来的坏处，也会带来的好处。
e.stopPropagation()

->事件委托（★★★）
原理： 用的是事件冒泡
本应该给子元素绑定的事件，我给父元素去设置，这样我们一旦点击了子元素，
就会通过事件冒泡给父元素的事件，然后我们通过事件对象.target 就能够获取到目标元素

->常用鼠标事件（★★★）
e.pageX | pageY  获取鼠标在页面中的位置
e.clientX | clientY  获取鼠标在可视区域的位置
e.screenX | screenY 获取鼠标在屏幕中的位置

->键盘事件（★★）
1) keyup  当键盘抬起的时候触发
2) keydown 当键盘按下的时候触发    识别功能键
3) keypress 当键盘按下的时候触发  不识别功能键
我们可以通过事件对象 e.keyCode 来获取键盘按下对应按键的 asicc 码

->BOM
browser object model  浏览器对象模型  就是在学习  window 对象

->window对象的常见事件
页面（窗口）加载事件（2种）（★★★）
1>window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
     注意:
        1) 有了 window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数.
        2) window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准.
        3)如果使用addEventListener 则没有限制
2> DOMCotentLoaded  dom元素渲染完毕的时候调用
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
IE9以上才支持！！！
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

->调整窗口大小事件（★★★）
resize  窗口发生改变的时候调用
window.innerWidth
window.innerHeight 获取的窗口的宽高

window.onresize 是调整窗口大小加载事件,  当触发时就调用的处理函数。
注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。

2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

->定时器（两种）（★★★）

window 对象给我们提供了 2 个非常好用的方法-定时器。
- setTimeout() 
- setInterval()  

setTimeout() 炸弹定时器
var timeId = setTimeout(function(){}, 延迟时间)
返回值是 定时器的标识,这个标识我们可以用来清除定时器
clearTimeout(timeId)  清除定时器

setInterval() 闹钟定时器
var timeId = setInterval(function(){}, 间隔时间)
返回值是 定时器的标识,这个标识我们可以用来清除定时器
clearInterval(timeId)

setTimeout 只会执行一次，而setInterval可以重复进行执行

this指向问题（★★★）
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。
现阶段，我们先了解一下几个this指向

1) 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2) 方法调用中谁调用this指向谁
3) 构造函数中this指向构造函数的实例

->window里面的内置对象
location对象
location.href   只要是赋值用来跳转页面的，获取的是地址栏的url（★★★）
location.search   获取url后面的参数  ?号后面的都是参数（★★★）
location.reload() 刷新， 不写参数或者写false 代表是普通刷新，有缓存就用缓存，没有缓存就去请求服务器
设置true 强制刷新，直接请求服务器（★★★）
location.assign()  跳转页面
location.replace() 跳转，不存在历史记录中，就不能进行回退

navigation->userAgent  获取的是客户端的类型（浏览器，手机，平板）

history对象
history.forward() 前进
history.back()  后退
history.go()  整数代表是前进，负数代表是后退（★★★）

js执行机制（★★）
同步跟异步的概念
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
同步： 这个任务要完成必须要等上一个任务执行完毕才行

异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
异步： 多个任务同时进行

js执行机制
主线程 执行任务栈，执行的同步任务，就是我们所编写的javaScript代码，代码一旦解析到异步的函数，会把这个异步的函数交给异步进程去处理，然后继续往下去执行我们同步代码，当我们所编写的代码执行完毕之后，任务栈会监听 任务队列
异步进程： 收到任务栈发过来的异步任务，它会自己进行逻辑处理，等到我们的事件要触发了，它会把这个任务丢到任务队列中
执行任务栈： 监听到任务队列中有任务，就会拿出来执行

元素偏移量 offset 系列（★★★）
offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1) 获得元素距离带有定位父元素的位置
2) 获得元素自身的大小（宽度高度）
3) 注意：返回的数值都不带单位

element.offsetTop | offsetLeft    
获取的是元素的偏移量，参照的是带有定位的父辈元素，如果父辈元素没有定位，参照的是body
element.offsetWidth|offsetHeight
获取的元素的宽高， padding + border + 内容
element.offsetParent
获取的是带有定位的最近的父辈元素，如果父辈元素都没有定位，那么获取的是body

offset 与 style 区别

offset

- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值是没有单位的
- offsetWidth 包含padding+border+width
- offsetWidth 等属性是只读属性，只能获取不能赋值
- 所以，我们想要获取元素大小位置，用offset更合适

style

- style 只能得到行内样式表中的样式值
- style.width 获得的是带有单位的字符串
- style.width 获得不包含padding和border 的值
- style.width 是可读写属性，可以获取也可以赋值
- 所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

元素可视区 client 系列（★★★）
element.clientLeft | clientTop 获取的是左边框|上边框的宽度
element.clientWidth|clientHeight 获取的是元素宽高， padding + 内容

自调用函数（立即执行函数）
(function(){})()
好处：防止命名污染

元素滚动 scroll 系列（★★★）
scrollLeft | scrollTop 水平 | 垂直方向滚动出去的距离
scrollWidth | scrollHeigh 内容的真实宽度 | 高度
滚动整个页面的时候， window.pageYOffset

三大系列总结（★★★）
他们主要用法：

1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop
2.client经常用于获取元素大小  clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  
4.注意页面滚动的距离通过 window.pageXOffset  获得

mouseenter 和mouseover的区别（★★★）
mouseenter 不会进行事件冒泡
mouseover 是会进行事件冒泡

动画函数封装（★★）
动画的原理
利用定时器 setInterval，在定时器的函数中，先获取到当前盒子的位置，然后加上移动的距离，最后把这个值设置给当前元素的偏移就好

缓动动画
非匀速动画
公式来实现
var step= (目标位置- 当前盒子的位置) /10
把这个step + 盒子当前的位置，就是最后要设置给盒子的偏移量

节流阀（★★★）

防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
 开始设置一个变量 var flag= true;
If(flag){flag = false; do something}       关闭水龙头
利用回调函数动画执行完毕， flag = true     打开水龙头

->移动端的事件（★★★）
移动端没有鼠标移入移动移出事件，但是移动端有特殊的事件来替代，就是触摸事件
touchstart 触摸到了屏幕
touchmove 手指在屏幕中滑动
touchend 手指离开屏幕

->移动端有特殊的事件对象
touchEvent 触摸事件
touches 获取的是正在触摸屏幕的所有的手指对象的集合
targetTouches 获取的是触摸当前元素对象的所有的手指对象的集合（★★★）
changedTouches 获取手指个数发生改变的手指对象的集合，从无到有，从有到无，添加手指，移除了一个手指（★★★）

H5操作类名的对象（★★★）
classList

添加类：
element.classList.add（’类名’）；
    focus.classList.add('current');

移除类：
element.classList.remove（’类名’）;
    focus.classList.remove('current');

切换类：切换类名 没有这个类名会进行添加，有这个类名会进行删除
element.classList.toggle（’类名’）;
    focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

->插件
swipre插件->里面有大量的轮播图效果 
media插件->用来处理 视频播放的
bootstrap
不管是插件还是框架，使用方式无非下面几点
1) 下载相应的资源（css，js，font...）
2) 引入我们关心的文件  css  js 
3) 查看官方文件，示例demo
4) copy示例demo过来，改吧改吧

->本地存储
sesstionStorage
生命周期->关闭当前窗口，那么缓存数据就没有了
存储大小 5M
方法
sesstionStorage.setItem(key,value)  key代表是属性名   value 代表是属性值
sesstionStorage.getItem(key)  获取缓存数据
sesstionStorage.removeItem(key) 移除缓存数据
sessionStorage.clear()  清空

localStorage
生命周期
永久生效，除非手动进行删除
存储大小 20M
方法
localStorage.setItem(key,value)  key 代表是属性名   value 代表是属性值
localStorage.getItem(key)  获取缓存数据
localStorage.removeItem(key) 移除缓存数据
localStorage.clear()  清空