@tsingwong 2016-02-21T03:58:59.000000Z 字数 3592 阅读 788

DOM day8

DOM JavaScript

DOM day8
- - - 1. HTML5

1. HTML5

1. HTML5简介

HTML5是HTML语言当前及未来的新标准。随着HTML5的到来，整合了结构层、样式层和行为层（以及浏览器中的JavaScript API）。
例如，在结构层中，HTML5添加了新标记元素，如<section>、<article>、<header>、<footer>，还提供了更多交互及媒体元素，<canvas>、<audio、video。
例如，在行为层，HTML5规定了DOM中每个元素的交互方式，以及新的API。如可以自定义<video>元素的控件，改变起播放方式，<form>元素则支持进度控制，在<canvas>元素中，可以绘制各种图形和添加图片及其他对象。
在表现层中，CSS 3 的多个模块囊括了高级选择器、渐变、变化及动画等。
最后，新JavaScript API还包括其他很多模块，如Geolocation、Storage、Drap-and-Drop、Socket及多线程等。

2. Canvas

每个浏览器都可以显示静态图片，通过GIF可以实现一些动画，或者使用CSS加JavaScript也能变化样式。HTML5中的<canvas>元素，通过它可以动态创建和操作图形图像。

getImageData(int x,int y,int width,int height)：该方法获取canvas上从(x,y)点开始，宽为width、高为height的图片区域的数据，该方法返回的是一个ImageData对象，该对象拷贝了画布指定矩形的像素数据，具有width、height、data等属性。data属性为一个数组，该数组每4个元素对应一个像素点，分别是R：红色，G：绿色，B：蓝色，A：alpha通道。

putImageData(ImageData,int x,int y)：将data里的数据放到canvas中从(x,y)点开始的区域。

getContext方法返回一个用于在画布上绘图的环境。

Canvas.getContext(contextID)
参数ContextID指定了想要在画布上绘制的类型，当前唯一合法值是“2d”，即指定了二维绘图，并返回一个环境对象，该对象导出一个二维绘图API。

darwImage()方法在画布上绘制图像、画布或视频，也可以绘制图像的某些部分，及增加或减少图像的尺寸。

context.drawImage(img,x,y);//在画布上定位图像
context.drawImage(img,x,y,width,height);//定位图像，且规定图像的宽度和高度

3. 音频和视频

<video>和<audio>这两个元素让HTML具有了原生视频和音频的能力，但也带来了一些不好处理的问题。
在HTML5之前，向网页中嵌入视频需要用到一大堆重复的<object>和<embed>元素。除代码外，第三方插件也存在各自的问题和局限性。
HTML5中的<video>元素为文档中嵌入影片以及与影片交互定义了一种标准方式，同时也把嵌入操作简化成了一个标签：

<video src="movie.mp4">
    <!-- 不支持原生视频时的替代内容-->
    <a href="movie.mp4">Download movie.mp4</a>
</video>

<audio>元素用法类似:

<audio src="sound.ogg">
    <!-- 不支持音频时的代替内容 -->
    <a href="sound.ogg">Donwload sound.ogg</a>
</audio>

像movie.mp4这样的视频，其实是一个包含很多东西的容器。拓展名为mp4表示视频是使用基于苹果QuickTime技术的MPEG4打包而成的。这个容器规定了不同的音频和视频轨道在文件中的位置，以及其他与回放相关的特性。其他容器还有m4v（另一个MPEG4拓展名）、avi（Audio Video Interleave，音频视频交错）、flv（Flash Video）等等。
每个影片容量中，音频和视频轨道都使用不同的编解码器来编码。编解码器决定了浏览器在播放时应该如何解码音频和视频。编解码器的核心是算法，用于压缩和存储视频，以减少原始文件的大小，同时有可能损失品质。视频编解码器有很多种，代表有三个：H.264、Theora和VP8。同样，音频文件也有编解码器，常见的有mp3（MPEG-1 Audio Layer 3）、aac（Advanced Audio Coding）和ogg（Ogg Vorbis）。
没有一款浏览器支持所有容器和编解码器。因此必须提供多种后备格式。为确保HTML5的最大兼容性，至少要包含下列三个版本：

基于H.264和AAC的MP4
WebM（VP8+Vorbis）
基于Theora视频和Vorbis音频的Ogg文件

4. 自定义控件

浏览器在显示<video>元素时，会为其添加一些与浏览器样式统一的标准播放控件。想自定义控件外观，或添加新的控件，可以通过DOM属性来实现：
1. currentTIme，返回当前播放位置，以秒表示；
2. duration，返回媒体的总时长，以秒表示，对于流媒体返回无穷大；
3. paused，表示媒体是否处于暂停状态。
此外，一些与特定媒体相关的事件，可触发脚本，主要事件：
1. play，在媒体播放开始发生；
2. pause，在媒体暂停时发生；
3. loadeddata，在媒体可以从当前播放位置开始播放时发生；
4. ended，在媒体已播放完成而停止时发生。

不管创建什么空间，都不要忘记在<video>元素中添加control属性：

<video src="movie.ogv" control>

这行代码会呈现出一个类似Chrome浏览器中常见的播放控制界面。

5. 表单

HTML5中增加了很多新表单元素、新输入控件类型和新属性。新空间类型包括：
1. email，用于输入电子邮件地址；
2. url，用于输入URL；
3. date，用于输入日期和时间；
4. number，用于输入数值；
5. range，用于生成滑动条；
6. search，用于搜索框；
7. tel，用于输入电话号码；
8. color，用于选择颜色。

新属性如下：
1. autocomplete，用于为文本（text）输入框添加一组建议的输入项；
2. autofoncus，用于让表单元素自动获得焦点；
3. form，用于对<form>标签外部的表单元素分组；
4. min、max和step，用在范围（range）和数值（number）输入框中；
5. pattern，用于定义一个正则表达式，以便验证输入的值；
6. placeholder，用于在文本输入框中显示临时性的提示信息；
7. required，表示必填。

为应对不兼容浏览器，必须使用特性检测。使用Modernizr库，可以进行兼容性检测。如检查浏览器是否支持某个输入类型的控件，可以使用inputtypes.type属性：

if(!Modernizr.inputtype.date){
    //生成日期选择器的脚本
｝

检查某个属性，则可以使用input.attribute属性：

if(!Modernizr.input.placeholder){
    //生成占位符提示信息的脚本
｝

不使用Modernizr，可以自己创建函数来检查浏览器是否支持某种类型的输入控件：

function inputSupportsType(type){
    if (!document.createElement) {return false;}
    var input = document.createElement('input');
    input.setAttribute("type",type);
    if (input.type == 'text' && type != "text") {
        return false;
    }else{
        return true;
    }
}

inputSuportsType函数使用方法与Modernizr一样：

if(!inputSupportsType('date')){
    //生成日期选择器的脚本
}

检查特定属性，可以使用下面函数：

function elementSupportsAttribute(elementName,attribute){
    if (!document.createElement) {return false;}
    var temp = document.createAttribute(elementName);
    return(attribute in test );
}

使用时需要传入元素名和要检查的属性名：

if(!elementSupportsAttribute('input','placeholder')){
    //生成占位符提示信息的脚本
}