🤳帶你在線探祕,解開"專有擴展"的神祕面紗!

1. 選擇符API

在操控節點或元素時咱們要先選取咱們要操做的節點,這裏就須要用到選取工具----選擇符API

Selectors API Level 1的核心是兩個方法：querySelector()和querySelectorAll()

1.1. querySelector()方法

他接收一個選擇符,返回符合要求的第一個元素,若沒有返回null

//獲取第一個div元素

var div01 = document.querySelector("div");

//獲取ID爲"123"的元素

var element123 = document.querySelector("#123");

//獲取類爲Person的第一個元素

var Person = document.querySelector(".Person");

//獲取類爲Person的第一個圖像元素

var PersonImg = document.querySelector("img.Person");
複製代碼

調用時做用域不一樣查找範圍不一樣,在document類型下調用會在文檔範圍內查找匹配項,在element類型下調用只會在該元素後代查找

1.2. querySelectorAll()方法

輸入和上一個同樣,返回的是一整個NodeList實例,即包含該API的一整組,可調用的類型除了document,element還有documentFragment

//獲取某div中的某元素的全部
var emmms = document.getElementById(".123").querySelectorAll("emmm");
複製代碼

要取得返回的NodeList中的每個元素可使用item()方法,或方括號語法(仿數組)

//strongs是一個取得的元素的全部

var i, len, strong;

for (i = 0, len = strong.length; i < len; i++ )
{
    strong = strongs[i];
    //或strongs.item(i);

    strong.className = "important";
}
複製代碼

1.3. matchesSelector()方法

Selectors API Level 2規範爲Element類型新增了一個方法matchesSelector().若是調用元素和輸入選擇符匹配,返回true,否就false

//檢測body元素下的調用元素是否與pagel匹配
if (document.body.matchsSelector("body.pagel"))
{
    //true
}
複製代碼

2. 元素遍歷

元素間的空格在IE9以前的版本不會返回文本節點,而其餘瀏覽器都返回,這致使的差別會讓使用firstNode等屬性時行爲不一致

因而Element Traversal API爲DOM元素添加了如下5個屬性。

1. childElementCount：返回子元素（不包括文本節點和註釋）的個數。
2. firstElementChild：指向第一個子元素；firstChild的元素版。
3. lastElementChild：指向最後一個子元素；lastChild的元素版。
4. previousElementSibling：指向前一個同輩元素；previousSibling的元素版。
5. nextElementSibling：指向後一個同輩元素；nextSibling的元素版。

能夠更方便的遍歷元素

var i, len, child = element.firstElementChild;

wheil(child != element.lastElementChild)
{
    //此處是對child的一些操做的簡略表明,好比能夠在這裏寫一個輸出,並不是一個方法
    processChild(child);

    child = child.nextElementSibling;
}
複製代碼

3. HTML5

其規則定義了大量js API

3.1. 與類相關的擴充

3.1.1. getElementsByClassName()方法

能夠更方便的爲帶有某些類的元素添加事件處理程序

接收一個參數,能夠是包含一個或多個類名的字符串,返回帶有指定類的全部元素的NodeList,其類名前後順序不重要

//取得ID爲123的元素中帶有456類名的全部元素
    var element01 = document.getElementsById("123").getElementsByClassName("456");

    //取得全部類中包含789和012的全部元素
    var element02 = document.getElementsByClassName("789 012");
複製代碼

調用時做用域不一樣查找範圍不一樣,在document類型下調用會返回類名匹配全部元素,在元素下調用只會在該元素後代查找

3.1.2．classList屬性

簡化了之前的對className屬性的添加,修改,刪除的操做

classList屬性是DOMTokenList的實例,DOMTokenList有length屬性，而要取得每一個元素可使用item()方法，也可使用方括號語法.

1. add(value)：將給定的字符串值添加到列表中。若是值已經存在，就不添加了。

2. contains(value)：表示列表中是否存在給定的值，若是存在則返回true，不然返回false。

3. remove(value)：從列表中刪除給定的字符串。

4. toggle(value)：若是列表中已經存在給定的值，刪除它；若是列表中沒有給定的值，添加它。

   //有一個div有三個類
    <div class = "zy zjj user">...</div>;
   
    //刪除user類
    div.classList.remove("user");
   
    //添加qwer類
    div.classList.add("qwer");
   
    //檢測是否存在user類,有就刪除,沒有就添加,簡稱"切換"
    div.classList.toggle("user");
   
    //肯定元素中是否存在既定類名
    if (div.classList.contains("zzy") )
    {
        //執行操做
    }
   複製代碼

3.2. 焦點管理

1. document.activeElement屬性，這個屬性始終會引用DOM中當前得到了焦點的元素。文檔剛剛加載完成時，document.activeElement中保存的是document.body元素的引用。文檔加載期間，document.activeElement的值爲null。

元素得到焦點的方式有頁面加載、用戶輸入（一般是經過按Tab鍵）和在代碼中調用focus()方法。

var button = document.getElementById("myButton");

//使button獲取焦點
button.focus();

//true
document.activeElement === button;
複製代碼

2. document.hasFocus()方法，這個方法用於肯定文檔是否得到了焦點。也能夠用於肯定用戶是否正在與頁面交互

這兩個結合能夠知道用戶具體在和哪一個元素交互

3.3. HTMLDocument的變化

3.3.1. readyState屬性

該屬性有兩個可能值:

1. loading，正在加載文檔；
2. complete，已經加載完文檔。

咱們可使用document.readyState來實現查看文檔是否加載完成的指示器

if (document.readyState == "complete")
{
    //執行操做
}
複製代碼

3.3.2. 兼容模式

IE給document添加了一個名爲compatMode的屬性，可知瀏覽器採用了哪一種渲染模式,在標準模式下，document.compatMode的值等於"CSS1Compat"，而在混雜模式下，document.compatMode的值等於"BackCompat"。

3.3.3. head屬性

3.4. 字符集屬性

1. charset屬性,其值爲"UTF-16",表示文檔中實際使用的字符集

2. defaultCharset屬性,表示當前文檔默認的字符集應該是什麼,若沒有使用默認字符集,那麼charset和defaultCharset的值可能會不同

經過這兩個屬性能夠獲得文檔使用的字符編碼的具體信息,能夠保證用戶正常查看頁面或使用應用

3.5. 自定義數據屬性

h5中能夠自行爲元素添加非標準屬性,要加前綴data-.能夠根據自定義數據屬性性能方便的知道點擊來自頁面的哪一個部分

在除了第一次使用(相似於給自定義屬性定義)之外的調用都不須要data-前綴

3.6. 插入標記

在大規模操控節點的狀況下使用直接插入HTML字符串會更簡單

3.6.1. innerHTML屬性

在讀模式下,它返回與調用元素全部子節點對應的HTML標記

在寫模式下,根據指定的值建立新的DOM樹,以此替換掉元素原先全部的子節點

3.6.2．outerHTML屬性

3.6.3．insertAdjacentHTML()方法

3.6.4．內存與性能問題

3.7 scrollIntoView()方法

解決滾動頁面

能夠在全部HTML元素上調用

傳入true或不傳,窗口滾動以後會讓調用元素的頂部與視口頂部儘量平齊。

傳入false,調用元素會盡量所有出如今視口中,不必定平齊

4. 專有擴展

即專屬於一些瀏覽器而且未成爲標準的擴展

4.1. 文檔模式

文檔模式決定了咱們可使用哪一個級別的CSS,能夠在js中使用哪些API,以及如何對待文檔類型,IE5,7,8,9每一個版本都有一種本身的文檔模式

好比IE5是以混雜模式渲染頁面,IE7是IE7標準模式,他們都沒法使用IE8以後的新功能

IE8是IE8標準模式,使用，所以可使用Selectors API、更多CSS2級選擇符和某些CSS3功能，還有一些HTML5的功能。一樣,IE9以後新功能沒法使用

IE9的文檔模式是最高級的文檔模式

若是想要強制瀏覽器以某種模式渲染頁面能夠用等價的標籤或使用HTTP頭部信息X-UA-Compatible

//強制以IE7文檔模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
複製代碼

• Edge：始終以最新的文檔模式來渲染頁面。忽略文檔類型聲明。對於IE8，始終保持以IE8標準模式渲染頁面。對於IE9，則以IE9標準模式渲染頁面。
• EmulateIE9：若是有文檔類型聲明，則以IE9標準模式渲染頁面，不然將文檔模式設置爲IE5。
• EmulateIE8：若是有文檔類型聲明，則以IE8標準模式渲染頁面，不然將文檔模式設置爲IE5。
• EmulateIE7：若是有文檔類型聲明，則以IE7標準模式渲染頁面，不然將文檔模式設置爲IE5。
• 9：強制以IE9標準模式渲染頁面，忽略文檔類型聲明。
• 8：強制以IE8標準模式渲染頁面，忽略文檔類型聲明。
• 7：強制以IE7標準模式渲染頁面，忽略文檔類型聲明。
• 5：強制將文檔模式設置爲IE5，忽略文檔類型聲明。

通常在默認狀況下,瀏覽器會經過文檔類型聲明來肯定文檔模式

document.documentMode屬性能夠知道給定頁面使用的是什麼文檔模式,返回版本號

4.2. children屬性

這個屬性出現的緣由是IE9以前的版本與其餘瀏覽器在出來文本節點中的空白符時出現了差別

這個屬性是HTMLCollection的實例，只包含元素中一樣仍是元素的子節點，除此以外children和childNodes沒有區別

//訪問時與childNodes同樣
var childCount = element.children.length;
var firstChild = element.children[0];
複製代碼

4.3. contains()方法

用於查找某節點是不是另外一個節點的後代

能夠不經過DOM文檔樹來獲取這個信息

應用祖先節點調用該方法,返回true和false

//測試<body>元素是不是<html>元素的後代
alert(document.documentElement.contains(document.body));

//true
複製代碼

類似方法:DOM Level 3 compareDocumentPosition()

用於肯定兩個節點之間的關係

返回一個表示該關係的位掩碼

掩碼	節點關係
1	無關(給定的節點不在當前文檔中)
2	居前(給定的節點在DOM樹中位於參考節點以前)
4	居後(給定的節點在DOM樹中位於參考節點以後)
8	包含(給定的節點是參考節點的祖先)
16	被包含(給定的節點是參考節點的後代)

咱們能夠將獲得的掩碼用邏輯符轉化成布爾值來用函數檢測節點關係

4.4. 插入文本

1. innerText屬性

能夠操做元素中包含的全部文本內容,包括文檔樹中的文本

他會按照由淺入深的順序將樹中全部的文本拼接起來

經過innerText寫入值時會刪除元素的全部子節點,而後插入包含相應文本值的文本節點

div.innerText = " Hello \" world \" !"

//設置innerText屬性的同時，也對文本中存在的HTML語法字符（小於號、大於號、引號及和號）進行了編碼。
複製代碼

由於innerTest永遠只會生成當前節點的一個子文本節點,因此爲了只生成一個子文本節點,他就必需要刪掉其餘的子節點標籤,咱們能夠用這個來過濾掉HTML標籤

div.innerText = div.innerText;
複製代碼

類似方法:DOM Level 3的textContent屬性

這兩個屬性返回的內容不徹底同樣

這個會返回行內樣式和腳本

2. outerText屬性

和innerText的區別在於做用範圍擴大到了調用他的節點以外

讀取文本時和前者同樣

但在寫模式下outerText會替換掉整個元素(包括子節點)

div.outerText = " Hello world ";

//至關於將hello~賦值給了建立的一個新的變量,而後用新變量替換原來的元素,該元素會被刪除沒法訪問
複製代碼

4.5. 滾動

• scrollIntoViewIfNeeded(alignCenter)：當前元素在視口中不可見的狀況下，滾動瀏覽器窗口或容器元素，讓它可見。若是當前元素在視口中可見，這個方法什麼也不作。若是將可選的alignCenter參數設置爲true，則表示儘可能將元素顯示在視口中部（垂直方向）。

• scrollByLines(lineCount)：將元素的內容滾動指定的行高，lineCount值能夠是正值，也能夠是負值。

• scrollByPages(pageCount)：將元素的內容滾動指定的頁面高度，具體高度由元素的高度決定。

  //當前元素不可見時讓它進入瀏覽器視口 document.images[0].scrollIntoViewIfNeeded();

  //將頁面主體滾動5行 document.body.scrollByLines(5);

  //將頁面主題往回滾動2頁 document.body.scrollByPages(-2);