(第二天)HTML5新增元素、屬性(下)及Range對象(上)

HTML5新增元素(下)

  • output：輸出元素，與label同樣有for屬性，常作為實(shí)時(或JS)輸出的載體。
<!--output demo-->
<!--oninput屬性:輸入即觸發(fā)-->
<form oninput="x.value = parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="a" value="50"> +
    <input type="number" id="b" value="50"> =
    <output name="x" for="a b"></output>
</form>

  • figure與figcaption：

    • figure：獨(dú)立內(nèi)容，移除對網(wǎng)頁無影響；通常用來表示圖片統(tǒng)計圖，代碼示例，表格統(tǒng)計，音視頻插件等；
    • figcaption：在figure元素之內(nèi)，作為標(biāo)題元素使用；一個figure內(nèi)建議只使用一個figcaption，并放在figure元素的第一個或最后一個位置。


<figure>
<figcaption>這是一群美女</figcaption>
<img src="1.jpg" alt="" width="50">
<img src="2.jpg" alt="" width="50">
<img src="3.jpg" alt="" width="50">
</figure>

* ***details與summary***：
  * *details*：有一個open屬性，true/false；可通過鼠標(biāo)點(diǎn)擊改變其open狀態(tài)；默認(rèn)為閉合狀態(tài)，可添加open屬性改變默認(rèn)值，也可通過js改變open屬性的值實(shí)現(xiàn)；
  * *summary*：作為標(biāo)題元素使用；若不存在該元素，瀏覽器會默認(rèn)為details元素添加一個標(biāo)題(使用"詳細(xì)信息",但不添加summary元素)；summary元素只可以有一個，若存在多個，只有第一個summary能實(shí)現(xiàn)其標(biāo)題功能，其他與普通元素一樣；可以放在details元素內(nèi)任何位置，但建議放在第一個，更易代碼閱讀。

  ```html
<!--details & summary demo-->
<head>
    <meta charset="UTF-8">
    <title>Details與Summary的示例</title>
    <script>
    function check() {
        var details = document.getElementById("details");
        details.open = true; /*可通過這種形式打開，也可通過在details元素中直接添加open屬性打開*/
        // alert(details.open);
    }
    </script>
</head>
<body onload="check()">
<!--此處添加了open屬性,即details元素默認(rèn)為打開狀態(tài); 否則默認(rèn)為閉合狀態(tài)-->
    <details id="details" open>
        <!-- 若不存在summary，則瀏覽器會使用默認(rèn)字符，如"詳細(xì)信息" -->
        <summary>文章列表</summary>
        <p>第一篇文章</p>
        <p>第一篇文章</p>
        <p>第一篇文章</p>
        <p>第一篇文章</p>
    </details>
</body>
  • mark：通過該元素可以高亮顯示元素中的內(nèi)容。
    <p><mark>mark</mark>是高亮的</p>
  • progress：進(jìn)度條；兩個屬性：value當(dāng)前進(jìn)度值，max最大值。
<!--progress 從0到100實(shí)時變化 demo-->
<body>
    <script>
    // 傳入rate值，實(shí)時更新progress的執(zhí)行方法
    function btn() {
        var i = 0;
        var supdate = setInterval(update, 100); /*不停的根據(jù)指定周期執(zhí)行指定函數(shù)，并返回一個對象*/

        function update() {
            if (i < 100) {
                i++;
                updateProgress(i);
            } else {
                clearInterval(supdate); /*根據(jù)setInterval返回的對象進(jìn)行人為終止*/
                console.log(i);
            }
        }

    }

    // 更新進(jìn)度條方法
    function updateProgress(rate) {
        var progressBar = document.getElementById("p");
        // 進(jìn)度條的value = span標(biāo)題的內(nèi)容 = 傳入的rate值
        progressBar.value = document.getElementsByTagName("span")[0].textContent = rate;
    }
    </script>
    <section>
        <h2></h2>
        <p>完成的百分比
            <progress id="p" max="100" value="0"></progress><span>0</span>%
        </p>
        <input type="button" onclick="btn()" value="點(diǎn)擊">
    </section>
</body>

  • meter：指定范圍的度量器，作為計量器，尺度使用。共六個屬性如下：

    • value：當(dāng)前度量值；
    • min：最小值；
    • max：最大值；
    • low：下限值；
    • high：上限值；
    • optimum：最佳值；

    <small>注：high < value < low時，meter顯示為黃色；low <= value <= high顯示綠色。

  • cite：引用，通常用作表示作品，如小說作品，電影作品等；以斜體形式顯示。
    <cite>速度與激情</cite>

  • small：小型文本，通常作為旁注；如免責(zé)聲明，注意事項，法律限制，版權(quán)聲明等。

<!--small demo-->
<footer>
    <small>版權(quán)聲明：</small>
</footer>
<!--small demo2-->
<dl>
    <dt>單人間</dt>
    <dd>399 元 <small>含早餐，不含稅</small></dd>
    <dt>雙人間</dt>
    <dd>599 元 <small>含早餐，不含稅</small></dd>
</dl>

HTML5新增屬性(下)

  • start,type,reversed：三個ol元素的屬性，其中start，type為HTML4.01不贊成而HTML5支持的屬性，reversed為HTML5新增的屬性。

    • start：設(shè)置起始(列表第一個)索引值；
    • type：設(shè)置索引值類型，有如下5種類型：1，A，a，I，i；
    • reversed：設(shè)置是否反轉(zhuǎn)；若添加該屬性，則索引值(和內(nèi)容無關(guān))會反轉(zhuǎn)。
      <!-- start表示li起始索引值，reversed表示反轉(zhuǎn) -->
  <!--此示例顯示的序列為E,D,C,B,A start定義了第一個索引值為E，reversed定義了逆向，即按E,D順序-->
  <ol start="5" reversed type="A">
      <li>第1個列表</li>
      <li>第2個列表</li>
      <li>第3個列表</li>
      <li>第4個列表</li>
      <li>第5個列表</li>
  </ol>

* ***control***：label對象(非元素,可通過JS獲取label元素返回label對象，也可通過JS創(chuàng)建label對象)的屬性；通過該對象屬性，可以訪問label標(biāo)簽下的第一個表單元素，如表單元素中存在for屬性綁定，則優(yōu)先訪問綁定的第一個表單元素。
> <small>表單元素(共7個)：input、select、textarea、button、datalist、keygen、output (最后3個為HTML5新增的表單元素)。

  ```html
<!--label對象control屬性 demo-->
<body>
    <script>
    // 設(shè)置郵編默認(rèn)值
    function setValue() {
        // 創(chuàng)建label對象，這里只用來說明創(chuàng)建方法
        // var label = document.createElement("LABEL");
        // 獲得label對象
        var label = document.getElementById("label");
        // 訪問label對象綁定的第一個表單元素,如無綁定,則訪問第一個表單元素
        var inputValue = label.control;
        inputValue.value = "1000001"; /*這里的值可以突破maxlength屬性的限制*/
    }
    </script>
    <form>
        <label for="txt" id="label">
            郵編:
            <input maxlength="6" id="txst">
            <!-- control屬性訪問的是這個input元素 -->
            <input maxlength="6" id="txt">
            <small>請輸入6位數(shù)字</small>
        </label>
        <input type="button" value="設(shè)置默認(rèn)值" onclick="setValue()">
    </form>
</body>
  • placeholder：文本框元素屬性；文本框未輸入狀態(tài)時顯示的提示用語（常見的文本框中的灰色提示文字）。輸入字符后自動消失。
    <input type="text" placeholder="請輸入姓名">

<small>文本框元素：input、textarea。

  • list：文本框元素屬性；引用數(shù)據(jù)列表(▽提示下拉)，其中包含輸入字段的預(yù)定義選項，也允許用戶輸入；屬性值為某個datalist表單元素的id；輸入字符時，若字符存在datalist中，會自動提示。

    • datalist：定義選項列表。請使用 input 元素的 list 屬性來綁定 datalist。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。
      <input type="text" list="listgroup">
  <!-- list屬性值為datalist元素的id值 -->
  <datalist id="listgroup">
      <!-- 輸入value相關(guān)字符，會自動提示； 輸入的是value值，后面的文字只是解釋說明作用-->
      <option value="ios">IOS學(xué)習(xí)</option>
      <option value="hack">入侵學(xué)習(xí)</option>
      <option value="golang">GO學(xué)習(xí)</option>
  </datalist>

* ***autocomplete***：form、input元素屬性；規(guī)定輸入字段是否應(yīng)該啟用自動完成功能，on/off，默認(rèn)值一般為on，默認(rèn)值由瀏覽器預(yù)定義。自動完成允許瀏覽器預(yù)測對字段的輸入。當(dāng)用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項。
> <small>autocomplete 屬性適用于 <form>，以及下面的 <input> 類型：text, search, url, telephone, email, password, datepickers, range 以及 color。

  ```html
    <form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get" autocomplete="on">
        First name:
        <input type="text" name="fname" />
        <br /> Last name:
        <input type="text" name="lname" />
        <br /> E-mail:
        <!--email涉及到個人隱私，未保證隱私不泄露，這里將autocomplete設(shè)置為off；即瀏覽器下次無法提示曾用email-->
        <input type="email" name="email" autocomplete="off" />
        <br />
        <input type="submit" />
    </form>
  • pattern：input屬性，規(guī)定用于驗(yàn)證輸入字段的正則表達(dá)式。

<small>pattern 屬性適用于以下 <input> 類型：text, search, url, telephone, email 以及 password。

<!--pattern demo-->
<form>
  <label>
      姓名：
      <!-- pattern規(guī)定此輸入框必須輸入A-Z之間的三個字符 -->
      <input type="text" pattern="[A-Z]{3}">
  </label>
  <input type="text" list="datalist" pattern="[A-Z]{3}">
  <datalist id="datalist">
      <option value="IOS">IOS學(xué)習(xí)</option>
      <!-- 此項value值不符合pattern規(guī)則，所以在下拉列表中不會顯示 -->
      <option value="ANDROID">android學(xué)習(xí)</option>
      <option value="WEB">web學(xué)習(xí)</option>
  </datalist>
  <input type="submit" value="提交">
</form>

  • selectionDirection：input&textarea屬性，用于獲取用戶選擇方向的行為，須通過JS方法獲取。

    • forward：返回值，表示用戶從左往右選擇，或是有字符未選擇的默認(rèn)值；
    • backward：返回值，表示用戶從右往左選擇；
    • none：表示文本框中未輸入任何字符

    <small>若從右往左選擇后，進(jìn)行了刪除、替換、點(diǎn)擊等行為，均返回forward。


<body>
<script>
function AD() {
// var txt = document.getElementById("txt");
// 上方方法與下方方法結(jié)果相同，只是不同獲取input節(jié)點(diǎn)的方法。
var txt = document.forms[0]['txtName'];
var userAction = txt.selectionDirection;
alert(userAction);
}
</script>
<form>
<input type="text" id="txt" name="txtName">
<input type="button" value="獲取用戶選擇文字方向" onclick="AD()">
</form>
</body>

* ***indeterminate***：input元素***checkbox***類型的屬性，表示非明確狀態(tài)，即選取與非選取之間。必須通過JS修改，默認(rèn)值為false；該狀態(tài)的下一個狀態(tài)為選中。
```html
<input type="checkbox" id="cb">
<script>
var cb = document.getElementById("cb");
cb.indeterminate = true;
</script>
  • height,width：input元素image類型的新屬性，定義圖片按鈕的高度和寬度。
    <input type="image" src="submit.gif" width="20" height="20">

HTML5之Range[范圍]對象-(上)

Range對象為頁面上一段連續(xù)區(qū)域，可通過Range對象獲取或修改網(wǎng)頁上的任何區(qū)域。

Selection對象與Range對象的使用

  1. 通過var selection = document.getSelection()獲取被選中的信息，包括選中區(qū)域數(shù)，區(qū)域內(nèi)容等；
  2. 通過selection.rangeCount屬性獲取被選中的區(qū)域數(shù)；
  3. 若rangeCount大于0，說明存在選中區(qū)域；則可通過selection.getRangeAt(i)獲取對應(yīng)i索引值的區(qū)域內(nèi)容。

<small>1. 索引值i：根據(jù)內(nèi)容的先后順序依次索引，并非根據(jù)選擇先后順序索引；</small>
<small>2. 根據(jù)瀏覽器的不同，可選擇區(qū)域也會不同；如chrome只能選擇一個區(qū)域，firefox則可選擇多個區(qū)域。</small>

<!--Selection & Range Demo-->
<body>
    <script>
    function showRanges(argument) {
        var html;
        var rangesContainer = document.getElementById("rangesContainer");
        var selection = document.getSelection();
        if (selection.rangeCount > 0) {
            html = "您選取了" + selection.rangeCount + "個區(qū)域<br/>";
            for (var i = 0; i < selection.rangeCount; i++) {
                /*返回指定索引值的range對象*/
                var rangeContent = selection.getRangeAt(i);
                console.log(rangeContent + "--" + rangeContent.toString());
                /*直接打印range對象和range.toString()效果相同*/
                html += "第" + (i + 1) + "段內(nèi)容為：" + rangeContent + "<br/>";
            }
            rangesContainer.innerHTML = html;
        }
    }
    </script>
    <h3>Selection對象與Range對象示例</h3>
    <input type="button" value="點(diǎn)擊顯示選擇區(qū)域的數(shù)量與內(nèi)容" onclick="showRanges()">
    <div id="rangesContainer"></div>
</body>

Range對象的方法

<small>關(guān)于節(jié)點(diǎn)、子節(jié)點(diǎn)：<p>this is a <b>text</b></p>，其中p對象為一個節(jié)點(diǎn)，this is a是p節(jié)點(diǎn)的第一個子節(jié)點(diǎn)(是一個text對象)；節(jié)點(diǎn)即元素(標(biāo)簽)對象；獲取子節(jié)點(diǎn)的方法：節(jié)點(diǎn).firstChild即可獲取第一個子節(jié)點(diǎn)。更多節(jié)點(diǎn)可通過節(jié)點(diǎn).childNodes[i]訪問。</small>

  • Range的選擇與刪除
    • selectNode(refNode)：選取整個元素（包含節(jié)點(diǎn)本身）,參數(shù)refNode:被選中的節(jié)點(diǎn)，如<p>text</p>；
    • selectNodeContents(refNode)：選取元素中的內(nèi)容(所有子節(jié)點(diǎn)，不包含節(jié)點(diǎn)本身)，如<p>text<b>demo</b>text</p>中的text<b>demo</b>text；
    • deleteContents()：刪除選取的Node或Contents，根據(jù)使用上述兩個不同的選取方法決定；


<body>
<script>
function deleteContents(mode) {
// 創(chuàng)建一個Range對象
var rangeObj = document.createRange();
var demoArea = document.getElementById("demo");
if (mode) { /如果為true，表示刪除整個元素/
// 選取整個Node
rangeObj.selectNode(demoArea);
rangeObj.deleteContents();
} else { /如果為false，表示僅刪除元素中的內(nèi)容/
// 選擇Node中的Contents
rangeObj.selectNodeContents(demoArea);
rangeObj.deleteContents();
}
}
</script>
<div id="demo" style="background-color: #f00; width: 300px; height: 300px;">這是一個Range方法DEMO</div>
<button onclick="deleteContents(true)">刪除整個元素</button>
<button onclick="deleteContents(false)">僅刪除元素中的內(nèi)容</button>
</body>


* ######Range范圍起始的設(shè)置
  * ***setStart***(*refNode*,*offset*)：設(shè)置Range的開始位置，`refNode：包含新的開始點(diǎn)的節(jié)點(diǎn)；offset：新開始點(diǎn)在refNode中的位置`；
  * ***setEnd***(*refNode*,*offset*)：設(shè)置Range的結(jié)束位置，`refNode：包含新的開始點(diǎn)的節(jié)點(diǎn)；offset：新開始點(diǎn)在refNode中的位置`；
> <small> setEnd設(shè)置的位置如果超出refNode的長度，則會設(shè)置失敗。

  ```html
<!--setStart & setEnd Demo-->
<body>
    <script>
        function deleteChar(argument) {
            var div = document.getElementById("rangeDemo");
            // 獲取div對象的第一個子節(jié)點(diǎn),即"13123123asdasdasd這是";無法使用div這個節(jié)點(diǎn)，這個節(jié)點(diǎn)沒有l(wèi)ength、也沒有data屬性，Range無法選取范圍。
            //var child = div.firstChild;
            
            //通過另一種方法獲取第一個子節(jié)點(diǎn)，第一個子節(jié)點(diǎn)是文本對象，有l(wèi)ength和data
            //第二個子節(jié)點(diǎn)為<b>...</b>，這個下面還有一個子節(jié)點(diǎn)，也是文本對象。
            //<b>...</b>節(jié)點(diǎn)的長度為1，如要操作該節(jié)點(diǎn)的子節(jié)點(diǎn)，則如下：
            //var child = div.childNodes[1].firstChild;
            var child = div.childNodes[0];
            printObj(child);
            var rangeObj = document.createRange();
            var begin = document.getElementById("begin").valueAsNumber;
            var end = document.getElementById("end").valueAsNumber;
            rangeObj.setStart(child, begin); /*設(shè)置range在節(jié)點(diǎn)中的起始位置*/
            //end若超出child的長度，則會再控制臺報錯，設(shè)置失敗
            rangeObj.setEnd(child, end); /*設(shè)置range在節(jié)點(diǎn)中的結(jié)束位置(含)*/
            rangeObj.deleteContents();
        }

        function printObj(obj) {
            var str = "";
            var printPlace = document.getElementById("printObj");
            //obj是一個鍵值對
            for(var key in obj) {
                str += key + ":" + obj[key] + "<br/>";
            }
            printPlace.innerHTML = str;
        }
    </script>
    <div id="rangeDemo" style="background-color: #00f; width: 300px;height: 300px;">13123123asdasdasd這是<b>一個很多子節(jié)點(diǎn)的，</b>用來被刪除的內(nèi)容</div>
    <label>起始位置：
    <input type="number" id="begin" value="0">
</label>
    <label>結(jié)束位置：
    <input type="number" id="end" value="3">
</label>
    <button onclick="deleteChar()">刪除指定位置內(nèi)容</button>
    <div id="printObj"></div>
</body>
  • setStartBefore(refNode)：設(shè)置Range的開始位置位于refNode節(jié)點(diǎn)之前；
  • setEndAfter(refNode)：設(shè)置Range的結(jié)束位置位于refNode節(jié)點(diǎn)之后；
  • setStartAfter(refNode)：設(shè)置Range的開始位置位于refNode節(jié)點(diǎn)之后；
  • setEndBefore(refNode)：設(shè)置Range的結(jié)束位置位于refNode節(jié)點(diǎn)之前；
<!--setStartBefore & setEndAfter  Demo-->
<body>
  <script>
  // 逐行刪除，從第一行開始
  function deleteRow() {
      var table = document.getElementById("myTable");
      /*判斷表單行數(shù)是否大于0，若等于0，則不能進(jìn)行刪除操作*/
      if (table.rows.length > 0) {
          // 創(chuàng)建Range對象
          var rangeObj = document.createRange();
          var row = table.rows[0]; /*獲取table的第一行*/
          // 設(shè)置Range的開始范圍為row節(jié)點(diǎn)之前
          rangeObj.setStartBefore(row);
          // 設(shè)置Range的結(jié)束范圍為row節(jié)點(diǎn)之后
          rangeObj.setEndAfter(row);
          // 刪除節(jié)點(diǎn)，row節(jié)點(diǎn)之前和row節(jié)點(diǎn)之后，Range的范圍就是整個row節(jié)點(diǎn)，即刪除第一行。
          rangeObj.deleteContents();
      }
  }
  </script>
  <table id="myTable" border="1" cellpadding="0" cellspacing="0">
      <tr>
          <td>內(nèi)容1</td>
          <td>內(nèi)容2</td>
      </tr>
      <tr>
          <td>內(nèi)容3</td>
          <td>內(nèi)容4</td>
      </tr>
      <tr>
          <td>內(nèi)容5</td>
          <td>內(nèi)容6</td>
      </tr>
  </table>
  <button onclick="deleteRow()">刪除第一行內(nèi)容</button>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容