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属性 |
