H5新增知识点

一，DOM扩展

1.获取元素：

1. document.getElementsByTagName(‘div’)通过标签名获取元素,符合匹配条件的第一个元素（动态获取）
2. document.getElementsByClassName (‘class’)通过类名获取元素，以伪数组形式存在（动态获取）
3. document.querySelector(‘selector’)通过css选择器获取元素。符合匹配条件的第一个元素（静态获取）
4. document.querySelectorAll(‘selector’)通过css选择器获取元素，以伪数组形式存在（静态获取）

2.类名操作：

1. Node.classList.add(‘class’) 添加class
2. Node.classList.remove(‘class’) 移除class
3. Node.classList.toggle(‘class’) 切换class 有则移除 无则添加
4. Node.classList.contains('class) 检测是否存在class

3 自定义属性：

1. 格式：data-*=" ", 例如:data-info=“自定义属性”, 然后通过Node.dataset[‘info’]可以获取自定义属性
2. 使用data-my-age = 18 ，获取Node.dataset[‘myAge’] 此时需要以驼峰个格式才能正确获取

二，网络监听接口

1.online & offline事件的监听使用

1. online: 在有网络的时候触发
2. offline：在没有网络时候触发

三，退出全屏和是否全屏状态

1. cancelFullScreen() & FullscreenElement 都是对document进行判断

document.querySelector("#cancelFull").onclick=function(){
    if(document.cancelFullScreen){
        document.cancelFullScreen();
    }
    else if(document.webkitCancelFullScreen){
        document.webkitCancelFullScreen();
    }
    else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen();
    }
    else if(document.msCancelFullScreen){
        document.msCancelFullScreen();
    }
}

2. FullscreenElement 中的MS的screen 不需要驼峰写法

document.querySelector("#isFull").onclick=function(){
   if(document.fullscreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullscreenElement){
        alert(true);
    }else{
        alert(false);
    }
}

四，FileReader 文件读取的使用

1，用一个onchange()事件，只要对象发生改变就触发这个事件

function FileReader(){}

2，创建一个文件读取对象

var reader = new FileReader();

3，获取选中的文件（文件存取在type="file"表单元素files文件中，且文件是一个数组），存取在变量file中

var file = document.querySelector("#myFile").files;

4，读取文件 通过readerAsDataURL()来获取

此时是转码的文件
reader.readAsDataURL(file[0]);

5，通过事件来捕获转给img对象的src

1. onabort: 读取文件中断片时触发
2. onerror: 读取错误时触发
3. onload: 文件读取成功完成时触发
4. onloadend: 读取完成时触发，无论成功还是失败
5. onloadstart: 开始文件过程中持续触发

reader.onload = function(){
console.log(reader.result);    //读取的文件在读取对象的reader.result中
document.querySelector("img").src= reader.result;
}

reader.onprogress=function(e){
    var percent= e.loaded/ e.total*100+"%";
    div.style.width=percent;
}

五 ，拖拽接口的使用

一.用于被拖拽元素事件有哪几种？

要拖拽必须先开启拖拽 , 用于被拖拽元素的事件

1. ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续
2. ondragstart 应用于拖拽元素，当拖拽开始时调用
3. ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
4. ondragend 应用于拖拽元素，当拖拽结束时调用

二.用于目标元素事件有哪几种？

应用于目标元素的事件

1. ondragenter 应用于目标元素，当拖拽元素进入时调用
2. ondragover 应用于目标元素，当停留在目标元素上时调用–持续
3. ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
4. ondragleave 应用于目标元素，当鼠标离开目标元素时调用

三.触发ondrap事件在目标中添加拖拽的对象

div2.ondragover=function(e){
    e.preventDefault();   //取消默认行为
 }
div2.ondrop=function(){
    div2.appendChild(p);
}

六 、 Web存储接口 & 应用缓存接口

session

StoragesessionStorage的使用：
1.存储数据到本地。存储的容量5mb左右。
2.这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据
3.它的生命周期为关闭当前页面，关闭页面，数据会自动清除
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容

localStorage

localStorage的使用：
1.存储的内容大概20mb
2.不同浏览器不能共享数据,但是在同一个浏览器的不同窗口中可以共享数据
3.永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除.如果想清除，必须手动清除
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容

应用缓存有哪些好处？

1. 配置需要缓存的资源
2. 网络无连接应用仍可用
3. 本地读取缓存资源，提升访问速度，增强用户体验
4. 减少请求，缓解服务器负担