《JS高程(3)》DOM擴展-API選擇符-第11章筆記(18)

(最近有些私人的事,忍不住想念叨兩句。今天雪格外的大,因爲一些拖了很久的事,說不上來的抑鬱,很多事到最後往往都是事與願違。還是太軟弱,一刀斬斷就不會像現在這樣割一次腐肉催眠自己一次了。要讓自己強大起來,稱爲自己的依靠纔不會失望!)
新的一天又開始,奮鬥吧少年~

瀏覽器中幾乎所有的DOM擴展都是專有的,對DOM的兩個主要的擴展是SelectorsAPI(選擇符API)和HTML5。還有Element Traversal (元素遍歷)規範,爲DOM添加了一些屬性。

選擇符API

JavaScript庫中最常用的一項功能,就是根據CSS選擇符選擇與某個模式匹配的DOM元素。
JQuery的核心就是通過CSS選擇符查詢DOM文檔取得元素的引用,從而拋開了getElementById()和getElementTagName().

Selectors API是由W3C發起定製的一個標準,致力於讓瀏覽器原生支持CSS查詢。所有實現這一功能的JavaScript庫都會寫一個基礎的CSS解析器,然後再使用已有的DOM方法查詢文檔並找到匹配的節點。

Selectors API Level 1的核心是兩個方法:

querySelector()方法
querySelectorAll()方法
通過Document和Element類型調用他們。

querySelector()方法

querySelector()方法接受一個CSS選擇符,返回與該模式匹配的第一個元素,如果沒有,返回null:

//取得body元素
var body = document.querySelector("body");

//取得ID爲"myDiv"的元素
var selected = document.querySelector("#myDiv");

//取得類爲"selected"的第一個元素
var selected = document.querySelector(".selected");

//取得類爲"button"的第一個圖像元素
var img = document.body.querySelector("img.buttom")

通過Document類型調用querySelector()方法時,會在文檔元素的範圍內查找匹配的元素。
通過Element類型調用querySelector()方法時,只會在該元素後代元素的範圍內查找匹配的元素。

querySelectorAll()方法

querySelectorAll()方法接受一個CSS選擇符,返回與該模式匹配的所有元素,返回一個帶有所有屬性和方法的NodeList實例,而底層實現則類似於一組元素的快照,而並非不斷對文檔進行搜索的動態查詢。

//取得某<div>中的所有<em>元素(類似於getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");

//取得類爲"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");

//取得所有<p>元素中分的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

要取得返回的NodeList中的每一個元素,可以使用item()方法,或者[]:

var i, len, strong;
for (i = 0, len = strongs.length; i < len; i++){
    //或者strong.item(i)
    strong = strong[i];
    strong.className = "important";
}

與querySelector()類似,如果傳入了瀏覽器不支持的選擇符或者選擇符中有語法錯誤,querySelectorAll()會拋出錯誤。

matchesSelector()方法

Selectors API Level 2規範爲Element類型新增了一個方法matcherSelector()。
參數:一個css選擇符;
返回值:調用元素與該選擇符匹配,返回true,否則,返回false。

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

在取得某個元素引用的情況下,使用這個方法能夠方便的檢測它是否能被querySelector()或querySelectorAll()方法返回。

包裝函數:

function matchesSelector(element, selector){
    if(element.matcherSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatcherSelector){
        return element.msMatchesSelector(selector);
    }else if(element.mozMatcherSelector){
        return element.mozMatchesSelector(selector);
    }else if(element.webMatcherSelector){
        return element.webMatchesSelector(selector);
    }else{
        throw new Error("Not supported.");
    }
}
if(matcherSelector(document.body, "body.page1")){
    //執行操作
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章