DOM擴充套件之HTML5

RZeeY發表於2020-04-06

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>
複製程式碼

列印結果如下：

`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>
複製程式碼

列印結果如下：

焦點管理

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>
複製程式碼

列印結果如下：

可以看到第一次和第二次列印時文件樹還未載入完畢，而第三次在頁面中的 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>
複製程式碼
```
列印結果如下：

我們可以看到第一次訪問 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>
複製程式碼
```
列印結果如下：

從上面例子可以看到，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

HTML5新增API之DOM 擴充套件
2019-03-22
HTMLAPI套件
DOM部分擴充套件
2018-04-18
套件
ASP.NET Core擴充套件庫之Http通用擴充套件
2021-04-19
ASP.NET套件HTTP
kotlin 擴充套件（擴充套件函式和擴充套件屬性）
2019-02-26
Kotlin套件函式
Scrapy之pipeline&擴充套件
2020-04-04
套件
【Kotlin】擴充套件屬性、擴充套件函式
2024-04-08
Kotlin套件函式
[開發效率]Kotlin之擴充套件
2018-12-07
Kotlin套件
PHP 操作 Redis 之 phpredis 擴充套件
2019-08-05
PHPRedis套件
burpsuite擴充套件開發之Python
2020-08-19
UI套件Python
Dubbo系列之（一）SPI擴充套件
2020-08-06
套件
ES6之字串擴充套件
2019-02-02
字串套件
擴充套件工具
2020-11-21
套件
Sanic 擴充套件
2019-04-21
套件
Mybatis擴充套件
2024-08-14
MyBatis套件
SpringMVC 擴充套件
2024-08-17
SpringMVC套件
ORACLE 擴充套件
2021-02-26
Oracle套件
Android 面試之實戰擴充套件
2018-07-15
Android面試套件
一次Zookeeper 擴充套件之殤
2019-05-29
套件
dart系列之:dart類的擴充套件
2021-11-16
Dart套件
OAuth 2.0 擴充套件協議之 PKCE
2021-11-15
OAuth套件協議
使用Kotlin擴充套件函式擴充套件Spring Data案例
2021-11-11
Kotlin套件函式Spring
JMeter 擴充套件開發：擴充套件 TCP 取樣器
2022-12-01
JMeter套件TCP
?用Chrome擴充套件管理器, 管理你的擴充套件
2019-03-18
Chrome套件
ES6之正則的擴充套件
2019-05-09
套件
ES6之函式的擴充套件
2019-04-30
函式套件
ES6之陣列的擴充套件
2019-03-22
陣列套件
WPF之花式控制元件功能擴充套件
2021-07-16
控制元件套件
安裝PHP之PDO_MYSQL擴充套件
2021-09-09
PHPMySql套件
iOS 通知擴充套件
2018-10-08
iOS套件
swift擴充套件Extensions
2018-09-05
Swift套件
擴充套件BSGS/exBSGS
2024-03-10
套件
Json擴充套件方法
2024-03-23
JSON套件
分類擴充套件
2019-05-11
套件
提高擴充套件性
2024-11-29
套件
HttpContext擴充套件類
2024-06-22
HTTPContext套件
LINQ擴充套件方法
2024-07-06
套件
Flask 自建擴充套件
2022-03-07
Flask套件
新增php擴充套件
2021-09-09
PHP套件

DOM擴充套件之HTML5

DOM 擴充套件之 HTML5

介紹

與類相關的擴充套件

`getElementsByClassName()` 方法

`classList` 屬性

焦點管理

`document.activeElement` 屬性

`focus()` 方法

`hasFocus()` 方法

`HTMLDocument` 的變化

`readyState` 屬性

相容模式： `document.compatMode` 屬性

`head` 屬性

字符集屬性

`charset` 屬性

`defaultCharset` 屬性

自定義資料屬性： `dataset` 屬性

插入標記

`innerHTML` 屬性

`outerHTML` 屬性

`insertAdjacentHTML` 方法

`scrollIntoView()`方法

相關文章

DOM擴充套件之HTML5

DOM 擴充套件之 HTML5

介紹

與類相關的擴充套件

getElementsByClassName() 方法

classList 屬性

焦點 管理

document.activeElement 屬性

focus() 方法

hasFocus() 方法

HTMLDocument 的變化

readyState 屬性

相容模式： document.compatMode 屬性

head 屬性

字符集屬性

charset 屬性

defaultCharset 屬性

自定義資料屬性： dataset 屬性

插入標記

innerHTML 屬性

outerHTML 屬性

insertAdjacentHTML 方法

scrollIntoView()方法

相關文章

`getElementsByClassName()` 方法

`classList` 屬性

焦點管理

`document.activeElement` 屬性

`focus()` 方法

`hasFocus()` 方法

`HTMLDocument` 的變化

`readyState` 屬性

相容模式： `document.compatMode` 屬性

`head` 屬性

`charset` 屬性

`defaultCharset` 屬性

自定義資料屬性： `dataset` 屬性

`innerHTML` 屬性

`outerHTML` 屬性

`insertAdjacentHTML` 方法

`scrollIntoView()`方法