2018-07-31

模板

今天介绍一下H5新增的API方法

DOM扩展

获取元素

1
2
3

1、document.getElementsByClassName ('class') 通过类名获取元素，以伪数组形式存在。
2、document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以伪数组形式存在。

注意 : 在上面写的注释,每种方法是以什么形式返回的数据. 具体该怎么操作,很重要,不然会爆错!!!

类名操作

1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切换class，有则移除，无则添加
4、Node.classList.contains('class') 检测是否存在class

注意 : Node 指一个有效的 DOM 节点 , 是一个统称!!! 这些都挺简单的 ,如果不会的话演示一下就OK了…

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=””，例如

1	data-info = "这是自定义属性";

通过 Node.dataset[‘info’] 我们就可以获取到西定义属性的值.

注意 : Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。

假设某元素<div id="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

1、读取 demo.dataset['name']或者 demo.dataset['age']

2、设置demo.dataset['name'] = 'web developer'

注：当我们如下格式设置时，则需要以驼峰格式才能正确获取

<div data-my-name="itcast">这样获取Node.dataset['myName']

案例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box" abc="123"></div>
	<script type="text/javascript">
		var box = document.getElementById('box');

		// dataset只能获取以data-开头的属性
		alert(box.dataset['abc']);
	</script>
</body>
</html>

多媒体全屏的方法

HTML5规范允许用户自定义网页上任一元素全屏显示。

元素对象.requestFullScreen()开启全屏显示
document.cancelFullScreen() 关闭全屏显示
由于其兼容性原因，不同浏览器需要添加前缀如：
- webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
- Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
document.fullscreenElement 获取处于全屏的元素可以用于检测当前是否处于全屏
- 如果当前没有处于全屏返回值为空
- 如果当前处于全屏返回处于全屏的元素对象
注意 : 不同浏览器需要添加前缀
document.webkitFullscreenElement、document.mozFullScreenElement

多媒体

autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
src	要播放的视频的 URL。
poster	指定视频的封面图片
muted	静音

自定义播放器

方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

本文标题:模板

文章作者:李大玄

发布时间:2018-07-31, 23:35:34

最后更新:2018-08-01, 01:00:54

原始链接:http://yoursite.com/2018/07/31/H5新增的API/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。