平凡前端之路_04.HTML5的新增常用API

FileReader对象

使用FileReader对象可以在客户端读取文件上传域所选择的文件内容。
首先，需要实例化FileReader对象

var reader = new FileReader();

对于不同类型的文件，FileReader提供了不同的方法来读取文件：

方法	描述
readAsText(file,encoding)	以文本文件方式读取文件。encoding指定读取文件的字符集，默认为UTF-8。
readAsBinaryString(file)	以二进制方式读取文件。
readAsDataURL(file)	以DataURL方式读取文件。
readAsArrayBuffer(file)	以二进制缓存方式读取文件,返回一个ArrayBuffer对象，即固定长度的二进制缓存数据。
abort()	停止读取。

主要事件：监听文件读取过程

事件	描述
onloadstart	开始读取数据时触发。
onprogress	正在读取数据时触发。
onload	成功读取数据后触发。
onloadend	读取数据完成后，无论成功或失败都将触发。
onerror	读取失败时触发。

Web存储

使用HTML5可以在本地存储用户的浏览数据。相对于Cookie更加安全快速。

本地存储	描述
localStorage	用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage	用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例，另外保存数据的对象的键和值只能是字符串，如需保存对象数据，需要作一定的转换。

方法	描述
localStorage.setItem(key,value)	保存数据
localStorage.getItem(key)	读取数据
localStorage.removeItem(key)	删除单个数据
localStorage.clear()	删除所有数据
localStorage.key(index)	得到某个索引的key

querySelector

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

参数	描述
CSS 选择器	必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。

根据id获取元素	输出
querySelector("#app")	<div id=​"app">​</div>​
querySelectorAll("#app")	NodeList [div#app]
getElementById(“app”)	<div id=​"app">​</div>​

根据类获取元素	输出
querySelector(".class")	<div class=​"class">​</div>​
querySelectorAll(".class")	NodeList(2) [div.class, div.class]
getElementsByClassName(".class")	HTMLCollection(2) [div.class, div.class]

根据类型获取元素	输出
querySelector(“div”)	<div id=​"app">​​</div>​
querySelectorAll(“div”)	NodeList(4) [ div#app, div, div.class, div.class]
getElementsByTagName(“div”)	HTMLCollection(4) [ div#app, div, div.class, div.class, app: div#app]

根据属性获取元素	输出
querySelector("[target]")	<div class=​"class" target=​"app">​</div>​
querySelectorAll("[target]")	NodeList [div.class]

根据属性值获取元素	输出
querySelector("[name = appName] ")	<div class=​"class" name=​"appName">​</div>​
querySelectorAll("[name = appName] ")	NodeList [div.class]
getElementsByName(“appName”)	NodeList [div.class]

id/name属性元素拓展

如果在HTML文档中用id属性为元素命名，并且如果Windows对象没有此名字的属性，Windows对象会赋予一个属性，它的名字是id的属性值，而它可以指向表示文档元素的HTMLElement对象。不推荐这种做法

根据id属性值获取元素	输出
app(window.app)	<div id=​"app">​</div>​

name属性为元素命名，只有部分文档元素（<form> 、<img>）可以指向表示该文档元素的HTMLElement对象。不推荐这种做法

根据name属性值获取元素	输出
appName(window.appName) 单个	<form name=​"appName">​</form>​
appName(window.appName) 多个	HTMLCollection(2) [form, img.class]​

classList

classList属性返回元素的 class 属性，只读，返回DOMTokenList对象，用于在元素中添加 add() 、移出remove()、切换toggle()css类。

className属性设置或返回元素的 class 属性，返回一个字符串。想要修改元素的class属性，每次都设置整个字符串的值。

属性	描述
length	返回类列表中类的数量(该属性是只读的 )

方法	描述
add(class1, class2, …)	在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
contains(class)	返回布尔值，判断指定的类名是否存在。
item(index)	返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, …)	移除元素中一个或多个类名。
toggle(class)	在元素中切换类名。在元素中移除的类名，并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。

HTML 知识题

---

题目	答案
读取localStorage数据的方法	localStorage.getItem(“键名”);
不是HTML5特有的存储类型是	Cookie
HTML5设置自定义表单元素校验规则	pattern 属性
HTML5设置自定义表单元素校验提示	setCustomValidity方法/title属性
在HTML中，设置input为重置按钮	type=“reset”
HTML5规定对元素进行隐藏的属性	hidden