js高級程序設計筆記——DOM擴展

時間 2019-11-09

標籤高級程序設計筆記 dom 擴展欄目 JavaScript 简体版

原文原文鏈接

DOM擴展

爲了實現更多的功能，會有一些標準或專有的DOM擴展。
標準擴展主要有：css
- SelectorAPI（選擇符API）
- HTML5
- Element Traversal（元素遍歷）

1、選擇符API

選擇符API可以容許JS代碼直接根據CSS選擇符選擇與某個模式匹配的DOM元素。
Selector API Level1有兩個核心方法：querySelector()、querySelectorAll()，在兼容的瀏覽器中，Document及Element類型的實例能夠調用它們。
Selector API Level2爲Element類型新增了一個方法：matchesSelector()。

（一）querySelector()方法

語法：querySelector(CSS選擇符)：返回與該CSS選擇符匹配的第一個元素，若無匹配元素，則返回null
實例：
//取得body元素
var body = document.querySelector("body");
//取得ID爲"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
註釋：
Document類型調用querySelector()方法，會在文檔元素的範圍內查找匹配的元素
Element類型調用querySelector()方法，只會在該元素後代元素的範圍內查找匹配的元素

（二）querySelectorAll()方法

語法：querySlectorAll(css選擇符)：返回全部匹配的元素，這些元素以NodeLise形式存在
要取得NodeList中的元素，可使用item()方法或者使用方括號語法

（三）matchesSelector()方法

語法：matchesSelector(CSS選擇符)，若是調用元素與該選擇符匹配，返回true；不然，返回false

各個瀏覽器對matchesSelector()方法只有一些實驗性地實現，若想使用該方法，最好是編寫一個包裝函數：web

function matchesSelector(element,selector){chrome

if(element.matchesSelector){
    return element.matchesSelector(selector);
}
// IE9+
else if(element.msMatchesSelector){
    return element.msMatchesSelector(selector);
}
//Firefox 3.6+
else if(element.mozMatchesSelector){
    return element.mozMatchesSelector(selector);
}
//safari5+、chrome
else if(element.webkitMatchesSelector){
    return element.webkitMatchesSelector(selector);
}
else{
    throw new Error("Not supported.");
}

}瀏覽器

2、元素遍歷

對於元素間的空格，不一樣瀏覽器的理解不一樣（IE9及以前版本不會返回文本節點，而其餘全部瀏覽器都會返回文本節點），致使childNodes和firstChild等屬性返回的結果不一致。爲了解決這一問題，Element Traversal規範爲DOM元素新定義了5個屬性：app

childElementCount：返回子元素的個數（不包括文本節點和註釋）
firstElementChild：指向第一個子元素
lastElementChild：指向最後一個子元素
previousElementSibling：指向前一個同輩元素
nextElementSibling：指向後一個同輩元素

3、HTML5

（一）與類相關的擴展

HTML4使得class屬性用得愈來愈多，爲了讓開發人員簡化對css類的用法，HTML5新增了不少API函數

1 getElementsByClassName()性能

該方法便可以被Document類型調用，又能夠被Element類型調用，返回的是NodeList對象code

2 classList屬性對象

在HTML5以前，想要操做類名，須要使用className屬性。爲了簡化操做類名的方式，HTML5爲全部元素新增了classList屬性，classList屬性還定義了以下方法：element

add(value)：將value添加到類名列表中，若該值已經存在，就不添加
contains(value)：列表中若是存在value值，則返回true；不然返回false
remove(value)：從列表中刪除給定的類名
toggle(value)：若列表中存在給定的類名，則刪除它；若列表中沒有給定的值，添加它

支持classList屬性的瀏覽器有FireFox3.6+和Chrome

（二）焦點管理

HTML5新增了輔助管理DOM焦點的功能

1 document.activeElement屬性

該屬性指向DOM中當前得到焦點的元素（元素得到焦點的方式：頁面加載、用戶輸入、代碼中調用focus()方法）
默認狀況，文檔剛加載完成時，document.activeElement中保存的是document.body元素；文檔加載期間，document.activeElement的值爲null

2 document.hasFocus()方法

該方法用於肯定文檔是否得到了焦點

（三）HTMLDocument的變化

1 readyState屬性

做用：該屬性用來指示文檔是否加載完成
該屬性由兩個取值：
loading：正在加載文檔
complete：已經加載完文檔
用法：用它來做爲文檔加載完成的指示器

if(document.readyState = "complete"){
```
//執行操做
```
}

2 compatMode屬性

頁面有兩種模式：標準模式和混雜模式，所以檢測頁面的模式就成爲瀏覽器的必要功能。
經過使用compatMode屬性開發人員能夠知道瀏覽器採用了哪一種模式：
標準模式：document.compatMode = "CSS1Compat"
混雜模式：document.compatMode = "BackCompat"

3 head屬性

document.head屬性能夠得到<head>元素
實現document.head屬性的瀏覽器有chrome和Safari5
若須要引用<head>元素，可使用如下方法兼容全部的瀏覽器：
var head = document.head || document.getElementsByTagName("head")[0];

（四）字符集屬性

1 charset屬性

含義：表示文檔中實際使用的字符集，也能夠用來指定新的字符集。
默認狀況下，document.charset = "UTF-16"
支持該屬性的瀏覽器有：IE、Firefox、Safari、Opera、Chrome

2 defaultCharset屬性

含義：當前文檔的默認字符集
支持該屬性的瀏覽器有：IE、Safari、Chrome

（五）自定義數據屬性

一、 HTML5規定能夠爲元素添加非標準的屬性，以此爲元素提供與渲染無關的信息，或者提供語義信息
二、什麼時候應用自定義數據屬性？
當給元素添加一些不可見的數據以便進行其餘處理，就會用到自定義數據屬性。在跟蹤連接或混搭應用中，經過自定義數據屬性能方便地知道點擊來自頁面的哪一個部分。
三、每一個自定義數據屬性，都要爲其添加前綴data-

<div id="myDiv" data-appId="12345" data-myName="nicholas"></div>

四、dataset屬性能夠訪問自定義屬性的值

//訪問上述div元素的自定義屬性  
var div = document.getElementById("myDiv");  
var appId = div.dataset.appId;  // 訪問自定義屬性值時，屬性名前沒必要加data-前綴

（六）插入標記

1 innerHTML屬性

在讀模式下，innerHTML屬性返回調用元素的全部子節點HTML標記
在寫模式下，innerHTML屬性會根據指定的值建立新的DOM樹，而後用新DOM樹替換調用元素原先的全部子節點
在讀模式下，不一樣的瀏覽器返回的結果不一樣

2 outerHTML屬性

在讀模式下，outerHTML返回調用它的元素及全部子節點的HTML標籤
在寫模式下，outerHTML會根據指定的HTML字符串建立新的DOM子樹，而後用這個DOM子樹徹底替換調用元素

3 insertAdjacentHTML()方法

語法：insertAdjacentHTML(插入位置，要插入的HTML文本)
插入位置必須是下列四個值之一：
- "beforebegin"，在當前元素以前插入一個緊鄰的同輩元素
- "afterend"，在當前元素以後插入一個緊鄰的同輩元素
- "afterbegin"，給當前元素插入第一個子元素（無論當前元素是否有無子元素）
- "beforeend"，給當前元素插入最後一個子元素（無論當前元素是否有無子元素）