document.queryselectorall("选择器");
备注:
与document.queryselector区别: queryselectorall 可以选中所有符合选择器规则的元素,返回的是一个列表。
queryselector返回的只是单独的一个元素
dom.classlist.add("类名"): 给当前dom元素添加类样式
dom.classlist.remove("类名"); 给当前dom元素移除类样式
classlist.contains("类名"); 检测是否包含类样式
classlist.toggle("active"); 切换类样式(有就删除,没有就添加)
例子:
效果:
自定义属性
data-自定义属性名
备注:
在标签中,以data-自定义名称
1. 获取自定义属性 dom.dataset 返回的是一个对象
dom.dataset.属性名 或者 dom.dataset[属性名]
注意:
属性名是不包含data-
2. 设置自定义属性
dom.dataset.自定义属性名=值 或者 dom.dataset[自定义属性名]=值;
文件读取
filereader
filereader 接口有3个用来读取文件方法返回结果在result中
readasbinarystring ---将文件读取为二进制编码
readastext ---将文件读取为文本
readasdataurl ---将文件读取为dataurl
☞ filereader 提供的事件模型
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
获取网络状态
☞ 获取当前网络状态
window.navigator.online 返回一个布尔值
☞ 网络状态事件
1. window.ononline
2. window.onoffline
获取地理定位
☞ 获取一次当前位置
window.navigator.geolocation.getcurrentposition(success,error);
1. coords.latitude 维度
2. coords.longitude 经度
☞ 实时获取当前位置
window.navigator.geolocation.watchposition(success,error);
本地存储
☞发展:
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.coo进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,html5规范则提出解决方案,使用sessionstorage和localstorage存储数据。
☞ localstorage:
1. 永久生效
2. 多窗口共享
3. 容量大约为20m
◆window.localstorage.setitem(key,value) 设置存储内容
◆window.localstorage.getitem(key) 获取内容
◆window.localstorage.removeitem(key) 删除内容
◆window.localstorage.clear() 清空内容
☞ sessionstorage:
1. 生命周期为关闭当前浏览器窗口
2. 可以在同一个窗口下访问
3. 数据大小为5m左右
◆window.sessionstorage.setitem(key,value)
◆window.sessionstorage.getitem(key)
◆window.sessionstorage.removeitem(key)
◆window.sessionstorage.clear()
操作多媒体
http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp