<datalist> 标签，兼容性不好
- 定义选项列表，需与
input元素配合使用，来定义input可能的值。datalist及其选项不会被显示出来，它仅仅是合法的输入值列表。 - 所有主流浏览器都支持
<datalist>标签，除了Internet Explorer和Safari。<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
classList 属性，兼容性不好
- 返回元素的类名，作为
DOMTokenList对象（DOMTokenList接口表示一组空格分隔的标记tokens）。用于在元素中添加，移除及切换CSS类。 -
classList属性是只读的，但可以使用add()和remove()方法修改它。 -
Properties：// length：返回类列表中类的数量，该属性是只读的 var len = document.getElementById('myDIV').classList.length - 方法：
// add(class1, class2, ...)：在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加 document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass") // contains(class)：返回布尔值，判断指定的类名是否存在 var flag = document.getElementById("myDIV").classList.contains("mystyle") // item(index)：返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null var className = document.getElementById("myDIV").classList.item(0) // remove(class1, class2, ...)：移除元素中一个或多个类名。移除不存在的类名，不会报错 document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass") // toggle(class, true|false)：在元素中切换类名。 // 第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。 // 第二个是可选参数，布尔值，用于设置元素是否强制添加（true）或移除（false）类，不管该类名是否存在。 document.getElementById("myDIV").classList.toggle("newClassName")
Dataset 存储
<div id="myDIV" data-a="a" data-b="b" data-c="c" data-d="d" data-a-b="a-b">myDIV</div>
- 利用
getAttribute、setAttribute存取dataset// get var a = document.getElementById("myDIV").getAttribute("data-a") // set or add document.getElementById("myDIV").setAttribute("data-e", "e") - 利用
dataset API存取dataset// get var a = document.getElementById("myDIV").dataset.a // set or add document.getElementById("myDIV").dataset.f = "f" // 如果涉及到连字符"-"，可以采取驼峰化的方法来存取 var ab = document.getElementById("myDIV").dataset.aB
HTML <html> manifest 属性
带有缓存 manifest 的 HTML 文档（用于离线浏览）
<html manifest="test.appcache">
FileReader() 读取文件
-
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。 -
属性：
FileReader.error：只读，返回读取文件时的错误信息，表示在读取文件时发生的错误
FileReader.readyState：只读，提供FileReader读取操作时的当前状态0：EMPTY，还没有加载任何数据 1：LOADING，数据正在被加载 2：DONE，已完成全部的读取请求FileReader.result：只读，返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。 -
事件处理：
FileReader.onerror：处理error事件，该事件在读取操作发生错误时触发
FileReader.onloadstart：处理loadstart事件，该事件在读取操作开始时触发
FileReader.onloadend：处理loadend事件，该事件在读取操作结束时（成功或失败）触发
FileReader.onload：处理load事件，该事件在读取操作完成时触发
FileReader.onprogress：处理load事件，该事件在读取操作完成时触发
FileReader.onabort：处理abort事件，该事件在读取操作被中断时触发 -
方法：
FileReader.abort()：中止读取操作。在返回时，readyState属性为DONE
FileReader.readAsArrayBuffer()：开始读取指定的Blob中的内容, 一旦完成,result属性中保存的将是被读取文件的ArrayBuffer数据对象
FileReader.readAsBinaryString()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据
FileReader.readAsDataURL()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data:URL格式的Base64字符串以表示所读取文件的内容
FileReader.readAsText()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容
网络状态
-
window.navigator.onLine：返回浏览器的联网状态（true或false） -
window.onOnline：监听事件，来获取浏览器联网状态的改变情况 -
window.onOffline：监听事件，来获取浏览器联网状态的改变情况
地理定位
window.navigator.geolocation.getCurrentPosition(function(position){
// 位置对象
console.log(position)
// 纬度
console.log(position.coords.latitude)
// 经度
console.log(position.coords.longitude)
}, function(error){
console.log(error)
})
本地存储
-
cookie：- 单条存储有大小限制 4KB，只能使用文本
- 数量限制(一般浏览器，限制大概在50条左右)
- 读取有域名限制 不可跨域读取，只能由来自 写入cookie的 同一域名 的网页可进行读取
- 时效限制
expires，每个cookie都有时效，最短的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁 -
cookie是http/https协议下的技术，不支持本地file文件对cookie操作
document.cookie="user=zhang:name=li;age=45" -
localStorage：生命周期为关闭浏览器窗口，在同一个窗口下数据可以共享，容量约5Mwindow.localStorage.setItem('name', '小明2') var name = window.localStorage.getItem('name') window.localStorage.removeItem('name') // 清空所有localStorage window.localStorage.clear() -
sessionStorage：永久生效，除非手动删除，可以多窗口共享，容量约20Mwindow.sessionStorage.setItem('name', '小明3') var name = window.sessionStorage.getItem('name') window.sessionStorage.removeItem('name') // 清空所有sessionStorage window.sessionStorage.clear()
网友评论