HTML5 高级程序设计 Web存储基础 应用程序编程接口

HTML的特性：

（1)语义:能够让你更恰当地描述你的内容是什么。

(2）连通性:能够让你和服务器之间通过创新的新技术方法进行通信。

(3）离线和存储:能够让网页在客户端本地存储数据以及更高效地离线运

(4)多媒体:使video和audio成为了在所有Web中的一等公民。

(5 )2D/3D绘图和效果:提供了一个更加分化范围的呈现选择。

(6）性能和集成:提供了非常显著的性能优化和更有效的计算机硬件

(7)多设备访问:能够处理各种输入和输出设备。

(8）样式设计:让作者们来创作更加复杂的主题样式。

HTML5引入的API:

(1)Canvas API

(2)拖放API

(3)地理位置API

(4)存储API

(5)文件API

(6)通信API

(7)网页多线程API

(8历史API

(9)离线API

元素选择方法：

1、querySelector() 方法

返回指定选择器或选择器组匹配的第一个元素HTML元素Element.如果找不到匹配项，则返回null，语法如下：

element= document.querySelector(selectors);

其中，selectors是包含一个或多个要匹配的css选择器的DOM字符串，该字符串必须是有效的css选择字符串；如果不是，则会引发syntax异常。

例如：

var btn = document.querySelector("#btnSelect");

btn.onclick = function() {

var odditem = document.querySelector(".odd");

odditem.setAttribute("style", "background-color: skyblue;color: white;")

};

2、querySelectorAll 0方法

文档对象调用的querySelectorAll 0方法返回与指定的选择器组匹配的文档中的元素列表(使用深度优先的先序遍历文档的节点)，返回的对象是NodeList，语法如下:

elementList = document.querySelectorAll(selectors);

其中，selectors 包含一个或多个匹配的CSS选择器。这个字符串必须尸一个合法的CSS selector，如果不是，则会抛出一个SyntaxError错误。

例如：

var btn = document.querySelector("#btnSelects");

btn.onclick = function() {

var oddList = document.querySelectorAll(".odd");

for (var i = 0; i < oddList.length; i++) {

oddList[i].setAttribute("style", "background-color: palegreen;color: white;")

}

};

HTML5 Web存储基础

HTML5的Web存储分成两种，即:

sessionStorage(会话存储)和localStorage(本地存储)sessionStorage和localStorage的主要区别如下:

         (1) localStorage和sessionStorage的操作代码完全相同，它们的区别仅在于数据的寿命。

         ( 2 ) localStorage主要用来保存访客将来还能看到的数据。

         ( 3 ) sessionStorage则用于保存需要从一个页面传 递给下一个页面的

localStorage和sessionStorage的属性：length：返回key/value对列表的长度。

localStorage和sessionStorage的方法：

getItem(key)：获取指定key存储的value值

setItem(key,value)：将value值存储到key指定的字段

key(index)：返回列表对应索引的key值

removeItem(key)：从存储中移除一个对应key的key/value值

clear()：