web基礎（三）HTML5提供的API

時間 2020-08-10

標籤 web 基礎 html5 html 提供 api 欄目 HTML 简体版

原文原文鏈接

web基礎（三）HTML5提供的API

1、HTML5 中的API

（一）、獲取頁面元素及類名操做和自定義屬性

一、獲取頁面元素

在 HTML 中獲取元素時，能夠經過 JavaScript 和 JQuery 獲取，在 HTML5 中，可使用 HTML5 提供瞭如下的兩個 API 獲取元素，其中，選擇器能夠是 CSS 中的任意一種選擇器類型：javascript

☞ document.querySelector("選擇器")； 　　備註：該API只能選中符合該選擇器匹配的第一個元素。 ☞ document.querySelectorAll("選擇器"); 　　備註：能夠選中全部符合選擇器規則的元素，返回的是一個列表。

document.querySelectorAll 與 document.querySelector區別： querySelectorAll 能夠選中全部符合選擇器規則的元素，返回的是一個列表。querySelector返回的只是單獨的一個元素。css

示例代碼以下：html

<body>
　　<ul>
　　　　<li>測試1</li>
　　　　<li>測試2</li>
　　　　<li>測試3</li>
　　　　<li>測試4</li>
　　　　<li>測試5</li>
　　</ul>
　　<p class="pclass">duanluo</p>

　　<script type="text/javascript">
　　　　// 獲取符合的第一個元素
　　　　var obj=document.querySelector("li");
　　　　console.log(obj);
　　　　// 獲取全部符合規則的元素
　　　　var obj=document.querySelectorAll("li");
　　　　for(var i=0; i<obj.length; i++) {
　　　　　　console.log(obj[i].innerText);
　　　　}
　　　　// 設置 p 元素的 字體顏色爲 紅色
　　　　document.querySelector(".pclass").style.color = "red";
　　</script>
</body>

二、類名操做

類名操做是在 CSS 中對 class 選擇器的動態操做，能夠動態的添加、移除、切換等操做 class 選擇器，主要提供了以下方法，在 HTML5 中，Dom能夠省略不寫：前端

☞ Dom.classList.add("類名"): 給當前dom元素添加類樣式 ☞ Dom.classList.remove("類名"); 給當前dom元素移除類樣式 ☞ Dom.classList.contains("類名"); 檢測是否包含類樣式 ☞ Dom.classList.toggle("active"); 切換類樣式（有就刪除，沒有就添加）

示例代碼以下：html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         .bg {
              height: 50px;
              background-color: orange;
         }
    </style>
</head>
　　<body>
       <div></div>
       <input type="button" name="" value="添加類名" class="add">
       <input type="button" name="" value="移除類名" class="remove">
       <input type="button" name="" value="切換類名" class="toggle">
       <input type="button" name="" value="是否包含類名" class="contains">
       <script type="text/javascript">
              //獲取頁面中元素
              var  div_obj = document.querySelector("div");
              var  add_btn = document.querySelector(".add");
              var  remove_btn = document.querySelector(".remove");
              var  toolge_btn = document.querySelector(".toggle");
              var  contains_btn = document.querySelector(".contains");
              //添加類名
              add_btn.onclick=function() {
                      div_obj.classList.add("bg");
              }
              //移除類名
              remove_btn.onclick=function () {
                      div_obj.classList.remove("bg");
              }
              //切換類名
              toolge_btn.onclick=function() {
                      div_obj.classList.toggle("bg");
              }
              //是否包含類名
              contains_btn.onclick=function() {
                    console.log(div_obj.classList.contains('bg'));
              }
       </script>
　　</body>
</html>

三、自定義屬性

在 HTML4 以前設置自定義屬性，只需在元素的標籤中寫上屬性的定義並賦值便可，如： <p p-name="p標籤"></p> ，其中 p-name 就是自定義屬性。在 HTML5 中，嚴格了自定義屬性的操做，在自定義屬性前要加上 data- 前綴，自定義的格式以下：java

格式：data-自定義屬性名 備註：在標籤中，以data-自定義名稱 1. 獲取自定義屬性 Dom.dataset 返回的是一個Dom對象 Dom.dataset.屬性名 或者 Dom.dataset[屬性名] 注意： 屬性名是不包含data- 
2. 設置自定義屬性 Dom.dataset.自定義屬性名 = 值 或者 Dom.dataset[自定義屬性名] = 值；

示例代碼以下（主要代碼）：git

<body>
　　<div class="nav"  data-name-test="zs" data-age="123">123</div>
　　<script type="text/javascript">
　　　　// 獲取 .nav 對象
　　　　var data=document.querySelector(".nav").dataset;
　　　　console.log(data.nameTest);// 打印 data-name-test 屬性的值 　　　　//設置自定義屬性
　　　　var  nav=document.querySelector(".nav");
　　　　nav.dataset.test="abc";
　　　　nav.dataset.TestAbc="123";
　　　　nav.dataset["hh"]="呵呵";
　　</script>
</body>

（二）、文件讀取

HTML5 中提供的文件 API 在前端中有着豐富的應用，上傳、下載、讀取內容等在平常的交互中很常見。並且在各個瀏覽器的兼容也比較好，包括移動端，除了 IE 只支持 IE10 以上的版本。本節主要是 FileReader 對象的一些方法和特性，FileReader 設計用來讀取文件裏面的數據，提供三個經常使用的讀取文件數據的方法，另外讀取文件數據使用了異步的方式，很是高效。具體以下所示：web

☞FileReader：有3個用來讀取文件方法返回結果在result中 　　readAsBinaryString ---將文件讀取爲二進制編碼 　　readAsText ---將文件讀取爲文本 　　readAsDataURL ---將文件讀取爲DataURL
 ☞FileReader 提供的事件模型 　　onabort ------中斷時觸發 　　onerror ------出錯時觸發 　　onload ------文件讀取成功完成時觸發 　　onloadend ------讀取完成觸發，不管成功或失敗 　　onloadstart------讀取開始時觸發 　　onprogress -----讀取中

示例代碼以下（主要代碼）：數據庫

<body>
　　<input type="file" name="">
　　<script type="text/javascript">
　　　　var input=document.querySelector("input");
　　　　input.onchange=function(){
　　　　　　//獲取到文件
　　　　　　var file=this.files[0];
　　　　　　//開始讀取，建立讀取器
　　　　　　var  reader=new FileReader();
　　　　　　//開始讀取
　　　　　　reader.readAsText(file);
　　　　　　//獲取讀取的結果
　　　　　　//當文件讀取完成後，才能夠獲取文件信息內容
　　　　　　reader.onload=function() {
　　　　　　　　console.log(reader.result);
　　　　　　}            
　　　　}
　　</script>
</body>

（三）、獲取網絡狀態

網絡狀態是網頁中很是重要的功能，咱們能夠在離線狀態下，緊急保存相關數據到本地，後面再聯網狀態時將本地的離線數據保存到數據庫，保護用戶的數據安全，不會因網絡問題而丟失數據。在 HTML5 中，提供了以下API操做網絡狀態：瀏覽器

☞ 獲取當前網絡狀態 　　window.navigator.onLine 返回一個布爾值，true：聯網狀態 / false：離線狀態 ☞ 網絡狀態事件 　　1. window.ononline 當聯網時觸發該事件 　　2. window.onoffline 當斷網時觸發該事件

示例代碼以下（主要代碼）：

<script type="text/javascript">
　　//獲取當前網絡狀態
　　var state=window.navigator.onLine;
　　if(state) {
　　　　alert("您好，當前處於聯網狀態");
　　}else {
　　　　alert("當前處於斷網狀態");
　　}
　　//當聯網的時候觸發該事件
　　window.ononline=function () {
　　　　alert("在線");
　　}
　　//當斷網的時候觸發該事件
　　window.onoffline=function() {
　　　　alert("斷網");
　　}
</script>

（四）、獲取地理定位

HTML5 Geolocation API 用於得到用戶的地理位置。鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。瀏覽器支持：Internet Explorer 九、Firefox、Chrome、Safari 以及 Opera 支持地理定位。對於一些帶有GPS的設備，如移動手機，地理定位更加精確。在HTML5 中，提供了以下API操做地理定位：

☞ 獲取一次當前位置 　　window.navigator.geolocation.getCurrentPosition(success,error); ☞ 實時獲取當前位置 　　window.navigator.geolocation.watchPosition(success,error);
　　其中，success：定位成功的回調方法，error：定位失敗的回調方法,
☞ 清除實現獲取的位置
　　window.navigator.geolocation.clearWatch(watchID)
　　其中，watchID是須要清除的實時獲取地理位置的 watch 
成員屬性： 一、coords.latitude 維度 二、coords.longitude 經度 三、coords.altitude 海拔 四、coords.speed 速度 五、timestamp 時間

示例代碼以下（主要代碼）：

<body>
　　<button id="btn">獲取當前瀏覽器所在的定位信息</button>
　　<script>
　　　　 btn.onclick=function () {
　　　　 // 獲取一次地理位置信息
       window.navigator.geolocation.getCurrentPosition(success,error);
       // 實時獲取地理位置信息
       var watchId = window.Navigator.geolocation.watchPosition(success,error);
    }
    function success(pos) {
      console.log('成功獲取定位信息');
      console.log('定位時間:'+pos.timestamp);
      console.log('經度:'+pos.coords.longitude);
      console.log('緯度:'+pos.coords.latitude);
      console.log('海拔:'+pos.coords.altitude);
      console.log('速度:'+pos.coords.speed);
    }
    function error(err) {
      console.log('獲取定位信息失敗');
      console.log('錯誤編號:'+err.code);
      console.log('錯誤消息:'+err.message);
    }
　　// 清除實時獲取的地理信息
　　window.Navigator.geolocation.clearWatch(watchId);
  </script>
</body>

（五）、本地存儲

隨着互聯網的快速發展，基於網頁的應用愈來愈廣泛，同時也變的愈來愈複雜，爲了知足各類各樣的需求，會常常性在本地存儲大量的數據，傳統方式咱們以 document.cookie 來進行存儲的，可是因爲其存儲大小隻有4k左右，而且解析也至關的複雜，給開發帶來諸多不便，HTML5 規範則提出解決方案，使用 sessionStorage 和 localStorage 存儲數據。具體API信息以下：

☞ localStorage： 　　特色：
　　　　1. 永久生效
　　　　2. 多窗口共享 　　　　3. 容量大約爲20M API： 　　　　window.localStorage.setItem(key,value) 設置存儲內容 　　　　window.localStorage.getItem(key) 獲取內容 　　　　window.localStorage.removeItem(key) 根據key刪除內容 　　　　window.localStorage.clear() 清空內容 ☞ sessionStorage： 　　特色：
　　　　1. 生命週期爲關閉當前瀏覽器窗口 　　　　2. 能夠在同一個窗口下訪問 　　　　3. 數據大小爲5M左右 API： 　　　　window.sessionStorage.setItem(key,value) 設置存儲內容 　　　　window.sessionStorage.getItem(key) 獲取存儲內容 　　　　window.sessionStorage.removeItem(key) 根據key刪除內容 　　　　window.sessionStorage.clear() 清空內容

示例代碼以下（主要代碼）：

一、localStorage

<body>
　　<input type="button" name="" class="bt1" value="添加">
　　<input type="button" name="" class="bt2" value="刪除">
　　<input type="button" name="" class="bt3" value="獲取">
　　<input type="button" name="" class="bt4" value="清空">
　　<input type="button" name="" class="bt5" value="索引獲取">
　　<script type="text/javascript">
　　　　var bt1=document.querySelector(".bt1");
　　　　　　bt1.onclick=function() {
　　　　　　　　window.localStorage.setItem("name","zs");
　　　　　　}
　　　　var bt2=document.querySelector(".bt2");
　　　　　　bt2.onclick=function() {
　　　　　　　　window.localStorage.removeItem("name");
　　　　　　}
　　　　var bt3=document.querySelector(".bt3");
　　　　　　bt3.onclick=function(){
　　　　　　　　console.log(window.localStorage.getItem("name"));    
　　　　　　}
　　　　var bt4=document.querySelector(".bt4");
　　　　　　bt4.onclick=function(){
　　　　　　　　window.localStorage.clear();
　　　　　　}

　　　　var bt5=document.querySelector(".bt5");
　　　　　　bt5.onclick=function(){
　　　　　　　　console.log( window.localStorage.key(1) );
　　　　　　}
　　</script>
</body>

二、sessionStorage

<script type="text/javascript">
　　window.sessionStorage.setItem("name","123");
　　var list='[{"name":"zhans","age":"18","gender":"男"},{"name":"lis","age":"23","gender": "女"}]';
　　window.sessionStorage.setItem("list",list);
</script>

sessionStorage和localStorage 的API在功能是同樣的，惟一的區別是：

localStorage：：1. 永久生效、2. 多窗口共享、3. 容量大約爲20M。

sessionStorage：1. 生命週期爲關閉當前瀏覽器窗口、2. 能夠在同一個窗口下訪問、3. 數據大小爲5M左右。

（六）、操做多媒體

多媒體特性是 HTML5 的一個重要特性，其中包括音頻和視頻的操做。

HTML5 <video> / <Audio> - 方法、屬性以及事件，本節只列出經常使用的，具體能夠參考： HTML 5 視頻/音頻參考手冊

注意：在視頻 / 音頻的元數據已加載後，其餘屬性纔可用。

一、Video（視頻）

HTML5 <video> 元素擁有方法、屬性和事件。

其中的方法用於播放、暫停以及加載等。其中的屬性（好比時長、音量等）能夠被讀取或設置。其中的 DOM 事件可以通知您，比方說，<video> 元素開始播放、已暫停，已中止，等等。

視頻格式與瀏覽器的支持

HTML5 中使用的 Video 及相關元素標籤

示例代碼以下：

<body>
　　<div style="text-align:center">
　　　　<button onclick="playPause()">播放/暫停</button>
　　　　<button onclick="makeBig()">放大</button>
　　　　<button onclick="makeSmall()">縮小</button>
　　　　<button onclick="makeNormal()">普通</button>
　　　　<br />
　　　　<video id="video1" width="420">
　　　　　　<source src="../多媒體標籤/trailer.mp4" type="video/mp4">
　　　　</video>
　　</div>
　　<script>
　　　　var myVideo = document.querySelector("#video1");
　　　　function playPause() { // 暫停或播放 　　　　　　if (myVideo.paused)
　　　　　　　　myVideo.play(); // 播放 　　　　　　else
　　　　　　　　myVideo.pause();// 暫停
　　　　}
　　　　function makeBig() {
　　　　　　myVideo.width = 560; // 設置寬度
　　　　}
　　　　function makeSmall() {
　　　　　　myVideo.width = 320;
　　　　}
　　　　function makeNormal() {
　　　　　　myVideo.width = 420;
　　　　}
　　</script>
</body>

二、Audio（音頻）

HTML5 中的音頻使用 <Audio> 元素，大體上和 <Video> 相似，具體示例代碼以下：

<body>
　　<audio class="mp3"  >
　　　　<source src="./做業/video/js.mp3" controls></source>
　　</audio>
</body>

（七）、應用程序緩存

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。

應用程序緩存爲應用帶來三個優點：

離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

如需啓用應用程序緩存，請在文檔的 <html> 標籤中包含 manifest 屬性：

<html manifest="/example/html5/demo_html.appcache">

每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。

manifest 文件的建議的文件擴展名是：".appcache"。

請注意，manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。

一、Manifest 文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分爲三個部分：

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

①、CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

②、NETWORK 小節規定文件 "login.asp" 永遠不會被緩存，且離線時是不可用的

NETWORK:
login.asp 
*          指示全部其餘資源/文件都須要因特網鏈接

③、FALLBACK 小節規定若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件

FALLBACK:
/html5/ /404.html
註釋：第一個 URI 是資源，第二個是替補。

二、更新緩存

一旦應用被緩存，它就會保持緩存直到發生下列狀況：

用戶清空瀏覽器緩存
manifest 文件被修改（參閱下面的提示）
由程序來更新應用緩存

三、完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 開頭的是註釋行，但也可知足其餘用途。應用的緩存會在其 manifest 文件更改時被更新。若是您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被從新緩存。更新註釋行中的日期和版本號是一種使瀏覽器從新緩存文件的辦法。

四、關於應用程序緩存的註釋

一旦文件被緩存，則瀏覽器會繼續展現已緩存的版本，即便您修改了服務器上的文件。爲了確保瀏覽器更新緩存，您須要更新 manifest 文件。

註釋：瀏覽器對緩存數據的容量限制可能不太同樣（某些瀏覽器設置的限制是每一個站點 5MB）。

示例代碼以下：

<!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">
    <body>
        <script type="text/javascript" src="/example/html5/demo_time.js">
        </script>
        <p id="timePara"><button onclick="getDateTime()">得到日期和事件</button></p>
        <p><img src="/i/w3school_banner.gif" /></p>
        <p>請打開<a href="/example/html5/html5_html_manifest.html" target="_blank">這個頁面</a>，而後脫機瀏覽，從新加載頁面。頁面中的腳本和圖像依然可用。</p>
    </body>
</html>

（八）、拖放

拖放（Drag 和 drop）是 HTML5 標準的組成部分。拖放是一種常見的特性，即抓取對象之後拖到另外一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。

示例代碼以下：

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            #div1 {
                width: 198px;
                height: 66px;
                border: 1px solid #aaaaaa;
            }
        </style>
        <script type="text/javascript">
            function allowDrop(ev) {
                ev.preventDefault();
            }
            function drag(ev) {
                ev.dataTransfer.setData("Text", ev.target.id);
            }
            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <p>請把 W3School 的圖片拖放到矩形中：</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br />
        <img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
    </body>
</html>

首先，要完成元素的拖放功能，須要進行一下步驟：

①、設置元素爲可拖放

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：

<img draggable="true" />

②、拖動什麼 - ondragstart 和 setData()

而後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值：

function drag(ev) {
　　ev.dataTransfer.setData("Text", ev.target.id);
}

在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。

③、放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。

默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

這要經過調用 ondragover 事件的 event.preventDefault() 方法：

function allowDrop(ev) {
　　ev.preventDefault();
}

④、進行放置 - ondrop

當放置被拖數據時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

function drop(ev) {
　　ev.preventDefault();
　　var data = ev.dataTransfer.getData("Text");
　　ev.target.appendChild(document.getElementById(data));
}

代碼解釋：

調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）。
經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")。
把被拖元素追加到放置元素（目標元素）中。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。