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