HTML5中的API概览

整理一下HTML5中的常见API。

前言

  HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个常用的。

一、获取页面元素及类名操作和自定义属性

1. 获取页面元素

  ●  document.querySelector(“选择器”);
   选择器:可以是css中的任意一种选择器
   通过该选择器只能选中第一个元素。
  ●  document.querySelectorAll(“选择器”);
   与document.querySelector区别:querySelectorAll 可以选中所有符合选择器规则的元素,返回的是一个列表。querySelector返回的只是单独的一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<ul>
    <li>
        <p>
            <span>第一个</span>
        </p>
    </li>
    <li>
        <span>第二个</span>
    </li>
</ul>

<script type="text/javascript">

    document.querySelector("li span").style.color = "red";
    var obj = document.querySelectorAll("li span")
    for (var i = 0; i < obj.length; i++) {
        obj[i].innerText = i + '. ' + obj[i].innerText
    }
</script>
</body>
</html>

2. 类名操作  

  ●  Dom.classList.add(“类名”);
   给当前dom元素添加类样式。
  ●  Dom.classList.remove(“类名”);
   给当前dom元素移除类样式。
  ●  classList.contains(“类名”);
   检测是否包含类样式。
  ●  classList.toggle(“active”);
   切换类样式(有就删除,没有就添加)。

3. 自定义属性 

  HTML5规范,自定义属性在标签中的名称为:data-自定义属性名
  ●  Dom.dataset.属性名 或者 Dom.dataset[属性名]
   获取自定义属性 Dom.dataset 返回的是一个对象
   注意:此处属性名不包含data-
  ●  Dom.dataset.自定义属性名=值 Dom.dataset[自定义属性名]=值
   设置自定义属性

4. 小案例

  自定义属性案例

二、文件读取

  使用HTML5的File接口需要先新建文件读取对象:

var reader = new FileReader();

1. FileReader方法

  FileReader有3个用来读取文件的方法:
  ●  .readAsText(file)   — 将文件读取为文本
  ●  .readAsDataURL(file)   — 将文件读取为DataURL(二进制流形式)
  ●  .readAsBinaryString(file)   — 将文件读取为二进制编码

2. FileReader事件

  ●  .onload   — 资源读取完毕 reader.result
  ●  .onprogress   — 读取进度更新时触发
  ●  .onloadstart   — 加载开始时触发
  ●  .onloadend   — 加载结束时触发
  ●  .onerror   — 出现错误时触发
  ●  .onabort   — 加载过程中中止时触发
  ●  .abort   — 手动中止加载

3. 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件读取</title>
</head>
<body>
<input type="file" name="">
<script type="text/javascript">
    var input_file = document.querySelector("input");

    input_file.onchange = function () {
        var files = this.files;
        var file = files[0];
        // 创建读取器
        var reader = new FileReader();


        // 将数据读取成二进制方式
        // reader.readAsBinaryString(file);
        // reader.onload=function(){
        //    console.log(reader.result);
        // }


        // 将数据读取成文本形式
        // reader.readAsText(file);
        // reader.onload=function(){
        //     console.log(reader.result);
        //  }


        //将数据读取成url形式
        reader.readAsDataURL(file);
        reader.onload = function () {
            console.log(reader.result);
        }

    }

</script>
</body>
</html>

4. 小案例

  读取图片显示

三、获取网络状态

1. 获取网络状态方法

// 获取当前网络状态
var state = window.navigator.onLine;

if (state) {
    alert("您好,当前处于联网状态");
} else {
    alert("当前处于断网状态");
}

2. 网络状态事件

// 当联网的时候触发该事件
window.ononline = function () {
    alert("在线");
}

// 当断网的时候触发该事件
window.onoffline = function () {
    alert("断网");
}

四、获取地理位置

1. 获取一次当前位置

// 只能获取一次当前地理位置信息
window.navigator.geolocation.getCurrentPosition(success, error);

function success (msg) {
    console.log(msg);
}

function error (msg) {
    console.log(msg);
}

2. 实时获取当前位置

window.navigator.geolocation.watchPosition(success,error);

// 实时获取地理位置:
window.navigator.geolocation.watchPosition(success, error);

function success (msg, position) {
    console.log(msg);
    console.dir(position);
}

function error (msg) {
    console.log(msg);
}

3. 小案例

  获取当前地理位置

五、本地存储

  传统方式我们以document.cookie来进行存储,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStorage和localStorage存储数据。

1. localStorage

  localStorage特点:
  ① 永久生效
  ② 多窗口共享
  ③ 容量大约为20M
  用法:
  ●  window.localStorage.setItem(key,value)   — 设置存储内容
  ●  window.localStorage.getItem(key)   — 获取内容
  ●  window.localStorage.removeItem(key)   — 删除内容
  ●  window.localStorage.clear()   — 清空内容

2. sessionStorage

  sessionStorage特点:
  ① 生命周期为关闭当前浏览器窗口
  ② 可以在同一个窗口下访问
  ③ 数据大小为5M左右
  用法:
  ●  window.sessionStorage.setItem(key,value)   — 设置存储内容
  ●  window.sessionStorage.getItem(key)   — 获取内容
  ●  window.sessionStorage.removeItem(key)   — 删除内容
  ●  window.sessionStorage.clear()   — 清空内容

六、操作多媒体

  参考手册

七、Canvas画布

  先不整理,用到的时候再进行学习


  转载请注明: 文渊博客 HTML5中的API概览

  目录