JavaScript——DOM擴充套件

JavaScript CSS · 發表 2018-09-24 22:31:54

摘要： DOM擴充套件來自javascript高階程式設計的第十一章 Selectors API和HTML 5. 選擇符 API Selector API. querySelector()方法 querySelector()方法...

DOM擴充套件

來自javascript高階程式設計的第十一章

Selectors API和HTML 5.

選擇符 API

Selector API.

querySelector()方法

querySelector()方法接收一個CSS選擇符，返回該模式匹配的得一個元素，若找不到匹配元素則返回null。

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

var myDiv = document.querySelector("#myDiv");

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

var img = document.body.querySelector("img.button");

querySelectorAll()方法

querySelectorAll()方法接收一個CSS選擇符，返回該模式匹配的所有元素的NodeList。若找不到匹配的元素則返回空的NodeList。

matchesSelector()方法

matchesSelector()方法接收一個CSS選擇符，若的呼叫元素與該選擇符匹配，則返回true，否則返回fale；

if (document.body.matchesSelector("body.page1")){
// true
}

元素遍歷

Element Traversal API為DOM元素添加了一下5個屬性：

1.childElementCount:返回子元素的個數。

2.firstElementChild:指向第一個子元素。

3.lastElementChild:指向最後一個子元素。

4.previousElementSibling:指向前一個同輩元素。

5.nextElementSibling:指向後一個同輩元素。

HTML5

與類相關的擴充

1.getElementsByClassName():可以通過document物件及所有HTML元素呼叫該方法。

2.classList屬性

焦點管理

1.document.activeElement屬性：該屬性會引用DOM中當前獲得了焦點的元素。

元素獲得焦點的方式有頁面載入、使用者輸入和在程式碼中呼叫focus()方法。

var button = document.getElementById("myButton");
button.focus();
document.activeElement === button; // true

2.document.hasFocus():用於確定文件是否獲得焦點。

var button = document.getElementById("myButton");
button.focus();
document.hasFocus(); // true

HTMLDocument的變化

1.readyState:loading, 正在載入文件。complete, 已經載入完文件。

2.相容模式:compatMode屬性

該屬性告訴開發人員瀏覽器採用了哪種渲染模式。

if(document.compatMode == "CSS1Compat") {
// 標準模式
} else if("BackCompat"){
// 混雜模式
}

3.head屬性

引用文件的<head> 元素。

字符集屬性

1.document.charset

2.document.defaultCharset

自定義資料屬性

H5規定，要為元素新增非標準的屬性，要新增字首data- ;

然後自定義屬性的值可以通過dataset屬性來訪問。dataset屬性是DOMStringMap的一個例項。

var div = document.getElementById("myDiv");

var appId = div.dataset.appId;
var myName = div.dataset.myname;

div.dataset.appId = 23456;

插入標記

1.innerHTML屬性:該屬性放回與呼叫元素的所有子節點對應的HTML標記。在寫模式下，innerHTML會根據指定的值建立新的DOM樹，然後用這個DOM樹完全替換呼叫元素原先的所有子節點。

2.outerHTML屬性:在讀模式下，outerHTML返回呼叫它的元素及所有子節點的HTML標籤。在寫模式下，outerHTML會根據指定的HTML字串建立新的DOM子樹。然後用這個DOM子樹完全替換呼叫元素。

3.insertAdjacentHTML()方法:傳入引數：插入位置、要插入的HTML文字。

插入位置：beforebegin、afterbegin、beforeend、afterend。

4.記憶體及效能問題：以上述方法替換子節點可能會導致瀏覽器的記憶體佔用問題。

scrollIntoView()方法

該方法可以滾動瀏覽器視窗或某個容器元素。

若將true傳入該方法，或者不傳入任何引數，則視窗滾動後會讓呼叫元素的頂部與視口頂部儘可能平齊。

若傳入false，呼叫元素會盡可能全部出現在視口中。

專有擴充套件

沒有被寫入標準的擴充套件

文件模式

IE8引用的一個新概念叫：文件模式

頁面的文件模式決定了可以使用什麼功能。

我覺得這個是IE特有的東西，所以不準備詳細記錄他了。

children屬性

children屬性是IE9為了處理與其他瀏覽器在處理文字節點中的空白符有差異的問題而誕生的。

contains()方法

IE中引入了該方法用於判斷某個節點是不是另一個節點的後代。