知识库

HTML5中的API

2019/9/14 Html5

# 获取页面元素

  • document.querySelector("选择器");

    • 选择器可以是css中的任意一种选择器
    • 通过该选择器只能选中第一个元素

  • document.querySelectorAll("选择器");

    • querySelectorAll会返回所有符合选择器规则的元素列表
    • querySelector返回的只是单独的一个元素

# 类名操作

🎈 Dom.classList.add("类名"): 给当前dom元素添加类样式

🎈 Dom.classList.remove("类名"); 给当前dom元素移除类样式

🎈 classList.contains("类名"); 检测是否包含类样式

🎈 classList.toggle("active");  切换类样式（有就删除，没有就添加）
1
2
3
4
5
6
7

# 自定义属性

在标签中可以通过 data-自定义属性名 来自定义属性

  • 获取自定义属性
    Dom.dataset.属性名或者Dom.dataset[属性名]
    Dom.dataset返回的是一个对象
  • 设置自定义属性
    Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值
  • 标签中为data-test-name="123"时，获取时要用Dom.dataset.testName

# 文件读取


上传头像(请上传png jpg gif ico格式的文件)



  • FileReader 有三个方法用来读取文件方法，返回结果在result中
    • readAsBinaryString --- 将文件读取为二进制编码
    • readAsText --- 将文件读取为文本
    • readAsDataURL --- 将文件读取为DataURL
  • FileReader提供的事件模型
    • onabort 中断时触发
    • onerror 出错时触发
    • onload 文件读取成功完成时触发
    • onloadend 读取完成触发，无论成功或失败
    • onloadstart 读取开始时触发
    • onprogress 读取中
// 获取到文件
var file = this.files[0];
// 创建读取器
var reader = new FileReader();
// 开始读取
reader.readAsText(file);
// 获取读取的结果
// 当文件读取完成后，才可以获取文件信息内容
reader.onload=function() {
  console.log(reader.result);
}
1
2
3
4
5
6
7
8
9
10
11

# 获取网络状态


当前网络状态 : --
  • 获取网络状态 window.navigator.onLine 返回一个布尔值
  • 网络状态事件
    • window.ononline
    • window.onoffline

# 获取地理位置

  • 获取当前地理位置
    window.navigator.geolocation.getCurrentPosition(success,error);

    • 如果getCurrentPosition()运行成功，则向参数success中规定的函数返回一个coordinates对象
      function success(position) {
  // position.coords.latitude --> 十进制的纬度
  // position.coords.longitude --> 十进制的经度
  // position.coords.accuracy --> 位置精度
  // position.coords.altitude --> 海拔，海平面以上以米计
  // position.coords.altitudeAccuracy --> 位置的海拔精度
  // position.coords.heading --> 方向，从正北开始以度计
  // position.coords.speed --> 速度，以米/每秒计
  // position.timestamp --> 响应的日期/时间
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
    • 如果getCurrentPosition()运行失败，则向参数error中规定的函数返回错误信息
      function error(error) {
  let msg = ''
  switch (error.code) {
    case error.PERMISSION_DENIED:
      msg = "用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      msg = "位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      msg = "请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      msg = "未知错误。"
      break;
  }
  alert(msg)
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18

  • 返回用户的当前位置，并继续返回用户移动时的更新位置
    window.navigator.geolocation.watchPosition(success,error);

  • 使用 clearWatch() 可以停止 watchPosition() 方法

# 本地存储

  • localStorage：
    • 永久生效
    • 多窗口共享
    • 容量大约为20M
    🎈window.localStorage.setItem(key,value) --> 设置存储内容

🎈window.localStorage.getItem(key) --> 获取内容

🎈window.localStorage.removeItem(key) --> 删除内容

🎈window.localStorage.clear() --> 清空内容

🎈window.localStorage.key(index) --> 获取指定索引位置数据项的键名
    1
    2
    3
    4
    5
    6
    7
    8
    9
  • sessionStorage：
    • 生命周期为关闭当前浏览器窗口
    • 可以在同一个窗口下访问
    • 数据大小为5M左右
    🎈window.sessionStorage.setItem(key,value) --> 设置存储内容

🎈window.sessionStorage.getItem(key) --> 获取内容

🎈window.sessionStorage.removeItem(key) --> 删除内容

🎈window.sessionStorage.clear() --> 清空内容

🎈window.sessionStorage.key(index) --> 获取指定索引位置数据项的键名
    1
    2
    3
    4
    5
    6
    7
    8
    9

# 拖放

  • 设置元素为可拖放
    <img draggable="true">
    1
  • 在拖放的过程中会触发以下事件
    • ondragstart - 用户开始拖动元素时触发
    • ondrag - 元素正在拖动时触发
    • ondragend - 用户完成元素拖动后触发
  • 释放目标时触发的事件:
    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
  • 在拖动元素时，每隔 350 毫秒会触发 ondragover 事件
  • 实例
    1. 首先设置draggable="true"使元素可拖动
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="1.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="100">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    1
    2
    3
    4
    1. 开始拖动时设置被拖数据的数据类型和值
    function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}
    1
    2
    3
    1. 规定在何处放置被拖动的数据
    function allowDrop(ev) {
  //默认地，无法将数据/元素放置到其他元素中。
  //如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
  //调用 ondragover 事件的 event.preventDefault() 方法设置允许放置
  ev.preventDefault();
}
    1
    2
    3
    4
    5
    6
    1. 放置被拖数据
    function drop(ev) {
  // 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  ev.preventDefault();
  // 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  var data = ev.dataTransfer.getData("Text");
  // 把被拖元素追加到放置元素（目标元素）中
  ev.target.appendChild(document.getElementById(data));
}
    1
    2
    3
    4
    5
    6
    7
    8

# WebSocket

# 介绍

  • WebSocket 是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
  • 获取 WebSocket 连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
  • 创建方法 var Socket = new WebSocket(url, [protocal] );
    • url： 连接的 URL
    • protocal： 可接受的协议（可选参数）

# 属性

  • readyState 只读属性，表示连接状态
    • 0：表示连接尚未建立。
    • 1：表示连接已建立，可以进行通信。
    • 2：表示连接正在进行关闭。
    • 3：表示连接已经关闭或者连接不能打开。
  • bufferedAmount 只读属性，表示已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数

# 事件

  • onopen 连接建立时触发
  • onmessage 客户端接收服务端数据时触发
  • onerror 通信发生错误时触发
  • onclose 连接关闭时触发

# 方法

  • send() 使用连接发送数据
  • close() 关闭连接

Canvas

此生不换
青鸟飞鱼