HTML5_API

H5API

类名操作

Node指一个有效的DOM节点，是一个通称
Node.classList.add(‘class’) 添加class
Node.classList.remove(‘class’) 移除class
Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
Node.classList.contains(‘class’) 检测是否存在class

自定义属性

1
2
3
4
5
6
类名操作
Node指一个有效的DOM节点，是一个通称
Node.classList.add('class') 添加class
Node.classList.remove('class') 移除class
Node.classList.toggle('class') 切换class，有则移除，无则添加
Node.classList.contains('class') 检测是否存在class

拖拽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

           -> 能够拖拽 draggable="true"

           -> ondragstart

           -> ondrop

           -> ondragover

              preventDefault()

步骤：
    1. 首先要保证元素可以被拖拽，通过设置 draggable="true"

    2. 被拖拽元素会触发一个ondragstart事件，在该事件中通过事件对象参数e,可对被拖拽数据信息进行操作

          e.dataTransfer.setData(k,value) 设置被拖拽对象的数据

    3. 容器在接收被拖拽元素的时候会触发一个ondrop的事件，通过该事件中的事件对象参数可以获取到被拖拽元素的信息 
          e.dataTransfer.getData(k)

          e.target.appendChild(被拖拽元素)   添加到容器中

    4. 容器在接收完被拖拽的元素后，会触发一个ondragover的事件，在该事件中可以通过事件对象参数设置让该容器允许接收元素
         e.preventDefault()

多媒体

1
2
3
4
5
6
7
8
canplay 事件
paused 播放状态
duration 获取总时长
currentTime 当前播放时间
play() 播放
pause() 暂停
注意： 存在一定的兼容信息 video.webkitRequestFullScreen() 全屏
video.webkitExitFullScreen(); 退出全屏

地理位置

获取当前地理位置信息(一次)

1
2
3
4
window.navigator.geolocation.getCurrentPosition(success,error)

  success ：当能够获取地理位置信息的回调函数
  error：   当不能获取地理位置信息的回调函数

实时获取当前地理位置信息（实时获取）

网络状态

1
2
3
4
5
6
7
8
window.navigator.onLine;、


<!-- 联网时候触发 -->
window.addEventListener("online",function(){});

<!-- 断网时候触发 -->
window.addEventListener("offline",function(){});

本地存储cookie local session

1
.Cookie cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去 这样无形中浪费了带宽.

sessionStorage

1
2
3
4
5
6
7
8
9
特点：
    1. 数据只能在同一个页面中数据，不能跨页面访问

    2. 页面关闭后数据随之销毁

    3. 不属于持久性本地存储

    4. 大小为5M

localStorage

1
2
3
4
5
6
7
8
9
10
localStorage.getItem(关键名)

localStorage.setItem(关键名,新数组)

删除本地存储

localStorae.removeItem(数据名)

localStorae.clear();

历史管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
history对象，历史记录管理对象。

常可用于单页面web应用(Single Page Application)，为应用添加历史记录。

- history.pushState(data, title) 追加一条历史记录  
  - data用于存储自定义数据
  - title网页标题，基本上没有被支持，一般设为空
- history.state 获取最新一条历史记录
- window.onpopstate事件，当前进或后退时则触发 

单页Web应用（single page web application） 简称SPA

- 单页面应用程序的特点
  - 整个网站由一个页面构成
  - 公共部分只加载一次
  - 利用Ajax局部刷新达到页面切换的目的
H5C3
#H5C3
HTML5_API
http://www.dwyblog.cn/2019/05/10/HTML5_API/
作者
幸福来敲门
发布于
2019年5月10日
许可协议