DOM擴充套件之HTML5

RZeeY發表於2020-04-06
套件HTML

DOM 擴充套件之 HTML5

介紹

HTML5 規範圍繞如何使用新增標記定義了大量 JavaScript API。其中一些 API 與 DOM 重疊， 定義了瀏覽器應該支援的 DOM 擴充套件。

與類相關的擴充套件

  • getElementsByClassName() 方法

    getElementsByClassName() 方法接收一個引數，即一個包含一或多個類名的字串，返回帶有指定類的所有元素的 NodeList 。傳入多個類名時，類名的先後順序不重要。

    <!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div class="my-div"></div>
    <div class="my-div your-div"></div>
  </body>
  <script>
    var allMyDiv = document.getElementsByClassName('my-div'); // 取得所有類中包含"my-div"元素
    var allOtherDiv = document.getElementsByClassName('my-div your-div'); // 取得所有類中包含"my-div"和"your-div"的元素，類名不分先後
    console.log(allMyDiv);
    console.log(allOtherDiv);
  </script>
</html>
複製程式碼

    列印結果如下：

    DOM擴充套件之HTML5

  • classList 屬性

    classList 屬性是 HTML5 新增的一種更簡單更安全的操作類名的方式。這個 classList 屬性是新集合型別 DOMTokenList 的例項。與其他 DOM 集合類似，DOMTokenList 有一個表示自己包含多少元素的 length 屬性，而要取得每個元素可以使用 item() 方法，也可以使用方括號語法。 此外，此型別還定義瞭如下幾個方法：

    方法名 描述
    add(value) 將給定的字串值新增到列表中。如果值已經存在，則不新增。
    contains(value) 表示列表中是否存在給定的值，如果存在則返回 true，否則返回 false。
    remove(value) 從列表中刪除給定的字串。
    toggle(value) 如果列表中已經存在給定的值，刪除它;如果列表中沒有給定的值，新增它。 
    <!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div class="my-div"></div>
    <div class="my-div your-div"></div>
  </body>
  <script>
    var myDiv = document.getElementsByClassName('my-div')[0]; // 取得所有類中包含"my-div"元素
    // 增加"add-class"類名
    myDiv.classList.add('add-class');
    console.log(myDiv.className); // "my-div add-class"
    // 移除"add-class"類名
    myDiv.classList.remove('add-class');
    console.log(myDiv.className); // "my-div"
    // 是否包含"add-class"類名
    console.log(myDiv.classList.contains('add-class')); // false
    // toggle"add-class"類名
    myDiv.classList.toggle('add-class');
    console.log(myDiv.className); // "my-div add-class"
  </script>
</html>
複製程式碼

    列印結果如下：

    DOM擴充套件之HTML5

焦點 管理

  • document.activeElement 屬性

    這個屬性始終會引用 DOM 中當前獲得了焦點的元素。元素獲得焦點的方式有頁面載入、使用者輸入（通常是通過按 Tab 鍵）和在程式碼中呼叫 focus()方法。

    注意：預設情況下，文件剛剛載入完成時，document.activeElement 中儲存的是 document.body 元 素的引用。文件載入期間，document.activeElement 的值為 null 。

  • focus() 方法

    這個方法用於設定焦點。

  • hasFocus() 方法

    這個方法用於確定文件是否獲得了焦點。

HTMLDocument 的變化

  • readyState 屬性

    Document 的 readyState 屬性有兩個可能的值：

    可能的值 描述
    loading 正在載入文件
    complete 已經載入完文件

    以下面程式碼為例：

    <!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <script>
    console.log(document.readyState);
  </script>
  <body>
    <div class="my-div"></div>
    <div class="my-div your-div"></div>
  </body>
  <script>
    console.log(document.readyState);
  </script>
  <script>
    window.onload = function (ev) {
      console.log(document.readyState);
    };
  </script>
</html>
複製程式碼

    列印結果如下：

    DOM擴充套件之HTML5

    可以看到第一次和第二次列印時文件樹還未載入完畢，而第三次在頁面中的 onload 事件回撥中則表示頁面已經渲染完畢了，故它的值為"complete"。

  • 相容模式： document.compatMode 屬性

    自從 IE6 開始區分渲染頁面的模式是標準的還是混雜的，檢測頁面的相容模式就成為瀏覽器的必要功能。IE 為此給 document 新增了一個名為 compatMode 的屬性，這個屬性就是為了告訴我們瀏覽器採用了哪種渲染模式。

    標準模式：document.compatMode 的值等於 "CSS1Compat"

    混雜模式: document.compatMode 的值等於 "BackCompat"

    if (document.compatMode == "CSS1Compat"){
	alert("標準模式");
} else {
	alert("混雜模式");
}
複製程式碼

  • head 屬性

    HTML5 新增了 document.head 屬性， 引用文件的 <head> 元素。

    document.head === document.getElementsByTagName("head")[0]; // true
複製程式碼

字符集屬性

  • charset 屬性

    HTML5 新增了幾個與文件字符集有關的屬性。其中，charset 屬性表示文件中實際使用的字符集， 也可以用來指定新字符集。預設情況下，這個屬性的值為"UTF-16"，但可以通過 <meta> 元素、響應頭 部或直接設定 charset 屬性修改這個值。

    alert(document.charset); // "UTF-16"
document.charset = "UTF-8";
複製程式碼

  • defaultCharset 屬性

    表示根據預設瀏覽器及作業系統的設定，當前文件預設的字符集應該是什麼。如果文件沒有使用預設的字符集，那 charset 和 defaultCharset 屬性的值可能會不一 樣，例如：

    if (document.charset !== document.defaultCharset){
	alert("Custom character set being used.");
}
複製程式碼

通過這兩個屬性可以得到文件使用的字元編碼的具體資訊，也能對字元編碼進行準確地控制。執行適當的情況下，可以保證使用者正常檢視頁面或使用應用。

自定義資料屬性： dataset 屬性

HTML5 規定可以為元素新增非標準的屬性，但要新增字首 data-，目的是為元素提供與渲染無關的資訊，或者提供語義資訊。這些屬性可以任意新增、隨便命名，只要以 data-開頭即可。

<div id="myDiv" data-id="12345" data-myname="RZeeY"></div>
複製程式碼

新增了自定義屬性之後，可以通過元素的 dataset 屬性來訪問自定義屬性的值。dataset 屬性的值是 DOMStringMap 的一個例項，也就是一個名值對的對映。在這個對映中，每個 data-name 形式 的屬性都會有一個對應的屬性，只不過屬性名沒有 data-字首（比如，自定義屬性是 data-myname， 那對映中對應的屬性就是 myname）。

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div id="myDiv" data-id="12345" data-myname="RZeeY" data-classmate-name="Jobs"></div>
  </body>
  <script>
    var myDiv = document.getElementById('myDiv');
    console.log(myDiv.dataset.myname); // "RZeeY"
    myDiv.dataset.myname = 'RRZZeeeeYY';
    console.log(myDiv.dataset.myname); // "RRZZeeeeYY"
    console.log(myDiv.dataset.classmateName); // "Jobs"
  </script>
</html>
複製程式碼

插入標記

  • innerHTML 屬性

    在讀模式下 innerHTML 屬性返回該節點所有的子節點（包括元素、註釋、文字）。

    在寫模式下 innerHTML 屬性會將指定的值建立新的 DOM 樹，並將完全替換呼叫元素原先的所有子節點。

    <!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div id="myDiv">
      <!-- 這是註釋 -->
      <div>1231</div>
    </div>
  </body>
  <script>
    var myDiv = document.getElementById('myDiv');
    console.log(myDiv.innerHTML);
    myDiv.innerHTML = '這是替換的文字';
    console.log(myDiv.innerHTML);
  </script>
</html>
複製程式碼

    列印結果如下：

    DOM擴充套件之HTML5

    我們可以看到第一次訪問 innerHTML 屬性時，它返回了其元素的的所有子節點。第二次訪問 innerHTML 屬性時 myDiv 中的子節點已被更換為*'這是替換的文字'*，說明 innerHTML 具有讀寫兩種模式。

  • outerHTML 屬性

    在讀模式下 outerHTML 屬性返回該元素和其所有的子節點（包括元素、註釋、文字）。

    在寫模式下 outerHTML 屬性會將指定的值建立新的 DOM 樹，並將完全替換呼叫元素和該元素原先的所有子節點。

    <!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div id="myDiv">
      <!-- 這是註釋 -->
      <div>1231</div>
    </div>
  </body>
  <script>
    var myDiv = document.getElementById('myDiv');
    console.log(myDiv.outerHTML);
    myDiv.outerHTML = '這是替換的文字';
  </script>
</html>
複製程式碼

    列印結果如下：

    DOM擴充套件之HTML5

    DOM擴充套件之HTML5

    從上面例子可以看到，outerHTML 和 innerHTML 不同的地方在於，outerHTML 屬性會返回其訪問該屬性的元素，同時在寫入時也會完全替換其呼叫的元素和它的所有子節點。

  • insertAdjacentHTML 方法

    對於 innerHTML 和 outerHTML 屬性來說，只能做到替換或者在該節點的子節點末尾追加等。而是否有辦法做到在指定位置後追加 HTML 文字？

    插入標記的最後一個新增方式是 insertAdjacentHTML() 方法。這個方法最早也是在 IE 中出現的， 它接收兩個引數:插入位置和要插入的 HTML 文字。第一個引數必須是下列值之一：

    引數值 描述
    beforebegin 在當前元素之前插入一個緊鄰的同輩元素
    afterbegin 在當前元素之下插入一個新的子元素或在第一個子元素之前再插入新的子元素
    beforeend 在當前元素之下插入一個新的子元素或在最後一個子元素之後再插入新的子元素
    afterend 在當前元素之後插入一個緊鄰的同輩元素

    注意： 這些值都必須是小寫形式

    第二個引數則是 HTML 字串。如下面程式碼：

    //作為前一個同輩元素插入
element.insertAdjacentHTML('beforebegin', '<p>Hello world!</p>');
//作為第一個子元素插入
element.insertAdjacentHTML('afterbegin', '<p>Hello world!</p>');
//作為最後一個子元素插入
element.insertAdjacentHTML('beforeend', '<p>Hello world!</p>');
//作為後一個同輩元素插入
element.insertAdjacentHTML('afterend', '<p>Hello world!</p>');
複製程式碼

scrollIntoView()方法

scrollIntoView() 可以在所有 HTML 元素上呼叫，通過滾動瀏覽器視窗或某個容器元素，呼叫元素就可以出現在視口中。如果給這個方法傳入 true 作為引數，或者不傳入任何引數，那麼視窗滾動之後會讓呼叫元素的頂部與視口頂部儘可能平齊。如果傳入 false 作為引數，呼叫元素會盡可能全部 出現在視口中，(可能的話，呼叫元素的底部會與視口頂部平齊。)不過頂部不一定平齊，例如:

// 讓元素可見
document.forms[0].scrollIntoView();
複製程式碼

- RZeeY

相關文章