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

ningwang 發布于2019-08-20 19:09 / 811人閱讀

摘要：擴展為了實現更多的功能，會有一些標準或專有的擴展。標準擴展主要有選擇符元素遍歷一選擇符選擇符能夠允許代碼直接根據選擇符選擇與某個模式匹配的元素。

DOM擴展

為了實現更多的功能，會有一些標準或專有的DOM擴展。

標準擴展主要有：

SelectorAPI（選擇符API）

HTML5

Element Traversal（元素遍歷）

一、選擇符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()方法只有一些實驗性地實現，若想使用該方法，最好是編寫一個包裝函數：

function matchesSelector(element,selector){

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.");
}

}

二、元素遍歷

對于元素間的空格，不同瀏覽器的理解不同（IE9及之前版本不會返回文本節點，而其他所有瀏覽器都會返回文本節點），導致childNodes和firstChild等屬性返回的結果不一致。為了解決這一問題，Element Traversal規范為DOM元素新定義了5個屬性：

childElementCount：返回子元素的個數（不包括文本節點和注釋）

firstElementChild：指向第一個子元素

lastElementChild：指向最后一個子元素

previousElementSibling：指向前一個同輩元素

nextElementSibling：指向后一個同輩元素

三、HTML5 （一）與類相關的擴展

HTML4使得class屬性用得越來越多，為了讓開發人員簡化對css類的用法，HTML5新增了很多API

1 getElementsByClassName()

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

2 classList屬性

在HTML5之前，想要操作類名，需要使用className屬性。為了簡化操作類名的方式，HTML5為所有元素新增了classList屬性，classList屬性還定義了如下方法：

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屬性可以獲得元素

實現document.head屬性的瀏覽器有chrome和Safari5

若需要引用元素，可以使用以下方法兼容所有的瀏覽器：
var head = document.head || document.getElementsByTagName("head")[0];

（四）字符集屬性

1 charset屬性

含義：表示文檔中實際使用的字符集，也可以用來指定新的字符集。

默認情況下，document.charset = "UTF-16"

支持該屬性的瀏覽器有：IE、Firefox、Safari、Opera、Chrome

2 defaultCharset屬性

含義：當前文檔的默認字符集

支持該屬性的瀏覽器有：IE、Safari、Chrome

（五）自定義數據屬性

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

4、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"，給當前元素插入最后一個子元素（不管當前元素是否有無子元素）

（七）scrollIntoView()方法

所有HTML元素均可調用該方法，通過滾動瀏覽器窗口或某個容器元素，調用元素就可以出現在視口中。
該方法參數的取值有兩種可能：
true：窗口滾動之后會讓調用元素的頂部與視口頂部盡可能平齊（不傳入參數時也會出現這種效果）
false：調用元素會盡可能全部出現在視口中，調用元素的底部會與視口頂部平齊。

四專有擴展 （一）文檔模式

document.documentMode

（二）children屬性

返回調用元素的元素子節點

（三）contains()方法

檢測某節點是不是另一個節點的后代

（四）插入文本

1 innerText屬性
2 outerText屬性

（五）滾動

GPU云服務器云服務器高級程序設計-筆記設計模式學習筆記高級程序設計高級系統程序設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85220.html

JavaScript高級程序設計學習筆記一（JavaScript簡介）

摘要：在上百種語言中算是命好的一個，還有就是最近納入高考體系的。由以下三個部分構成。就是對實現該標準規定的各個方面內容的語言的描述。是針對但經過擴展的用于的應用程序編程接口。將頁面映射為由節點構成的樹狀結構。 JavaScript的歷史這里就不再贅述了，當然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個，還有就是最近納入高考體系的python...

supernavy 2019-08-22 11:17 評論0 收藏0
《javascript高級程序設計》筆記：script元素屬性

摘要：高級程序設計摘錄可選。表示通過屬性指定的代碼的字符集。這個屬性并不是必需的，如果沒有指定這個屬性，則其默認值仍為。規范要求腳本按照它們出現的先后順序執行，因此第一個延遲腳本會先于第二個延遲腳本執行，而這兩個腳本會先于事件執行。《javascript高級程序設計》摘錄： async:可選。表示應該立即下載腳本，但不應妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部...

since1986 2019-08-20 18:34 評論0 收藏0
《JavaScript高級程序設計》筆記：DOM擴展（十一）

摘要：取得所有類中包含和的元素。類名的先后順序無所謂取得為的元素中帶有類名的所有元素焦點管理也添加了輔助管理焦點的功能。首先就是屬性，這個屬性始終會引用中當前獲得了焦點的元素。另外就是新增了方法，這個方法用于確定文檔是否獲得了焦點。選擇符API querySelector()方法 // 取得body元素 var tbody = document.querySelector(body); ...

BenCHou 2019-08-21 10:22 評論0 收藏0
《JavaScript高級程序設計》筆記：JavaScript簡介（一）

摘要：實現一個完整的實現應該由下列三個不同的部分組成核心文檔對象模型瀏覽器對象模型文檔對象模型是針對但經過擴展用于的應用程序編程接口。級別級由兩個模塊組成核心和。其中，核心規定是如何映射基于的文檔結構，以便簡化對文檔中任意部分的訪問和操作。 javascript從一個簡單的輸入驗證器發展成為一門強大的編程語言，完全出乎人們的意料。 javascript實現一個完整的javascript實現應...

Edison 2019-08-19 14:51 評論0 收藏0
001-讀書筆記-JavaScript高級程序設計 JavaScript簡介

摘要：由于計算機的國際化，組織的標準牽涉到很多其他國家，因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的，級一般指的是最初支持的。這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 評論0 收藏0