JavaScript DOM擴(kuò)展——“選擇符API和元素遍歷”的注意要點(diǎn)

justCoding 發(fā)布于2019-08-19 17:13 / 564人閱讀

摘要：實(shí)際上，的核心就是通過(guò)選擇符查詢文檔取得元素的引用。方法該方法接收一個(gè)選擇符，返回的是所有匹配的元素而不僅僅是一個(gè)元素。而其底層實(shí)現(xiàn)則類似于一組元素的快照，而非不斷對(duì)文檔進(jìn)行搜索的動(dòng)態(tài)查詢。

選擇符API

Selector API Level1 的核心就是兩個(gè)方法：querySelector()和querySelectorAll()。實(shí)際上，jQuery的核心就是通過(guò)CSS選擇符查詢DOM文檔取得元素的引用。

querySelector()方法

該方法接收一個(gè)CSS選擇符，返回與該模式匹配的第一個(gè)元素，如果沒(méi)有找到匹配的元素，返回null。如：

console.log(document.querySelector("body")); //HTMLBodyElement
console.log(document.querySelector("#divId")); //HTMLDivElement
console.log(document.querySelector(".info")); //HTMLParagraphElement
console.log(document.querySelector("p.info")); //HTMLParagraphElement
console.log(document.body.querySelector(".info")); //HTMLParagraphElement
console.log(document.querySelector("body.title")); //null

try{
    document.querySelector(wtf);
}catch(e){
    console.log(e); //ReferenceError stack: message: wtf is not defined
}

如上，如果傳入了不被支持的選擇符，該方法會(huì)拋出錯(cuò)誤。

querySelectorAll()方法

該方法接收一個(gè)CSS選擇符，返回的是所有匹配的元素而不僅僅是一個(gè)元素。這個(gè)方法返回的是一個(gè)NodeList的實(shí)例。而其底層實(shí)現(xiàn)則類似于一組元素的快照，而非不斷對(duì)文檔進(jìn)行搜索的動(dòng)態(tài)查詢。這樣可以避免使用NodeLIst對(duì)象。能夠調(diào)用該方法的類型包括Document、DocumentFragment和Element。如：

var p = document.querySelector("#divId").querySelector(".info");
console.log(p.firstChild.nodeValue); //獲取id為divId的div里面的className值為.info的節(jié)點(diǎn)

var p = document.querySelectorAll("p");
console.log(p.length); //獲取所有p的數(shù)量

同樣的，如果傳入了瀏覽器不支持的選擇符或者選擇符中有語(yǔ)法錯(cuò)誤，該方法會(huì)拋出錯(cuò)誤。

matchesSelector()方法

這個(gè)方法接受一個(gè)參數(shù)，CSS選擇符，如果調(diào)用元素與該選擇符匹配，返回true，否則返回false。為了解決瀏覽器兼容問(wèn)題，可以使用下面的包裝函數(shù)：

function matchesSelector(element, selector) {
    if (element.matchSelector) {
        return element.matchesSelector(selector);
    } else if (element.msMatchesSelector) { //IE
        return element.msMatchesSelector(selector);
    } else if (element.mozMatchesSelector) { //FireFox
        return element.mozMatchesSelector(selector);
    } else if (element.webkitMatchesSelector) { //safari,chorme
        return element.webkitMatchesSelector(selector);
    } else {
        throw new Error("No supportted!");
    }
}

console.log(matchesSelector(document.body, "body")); //true

元素遍歷Element Traversal規(guī)范

對(duì)于元素間的空格，各瀏覽器會(huì)做出不同反應(yīng)，就導(dǎo)致了在使用childNodes和firstChild等屬性時(shí)的行為不一致。

由此，Element Traversal API 為DOM元素添加了以下5個(gè)屬性：

childElementCount：子元素的個(gè)數(shù)（不包括文本節(jié)點(diǎn)和注釋）；

firstElementChild：第一個(gè)子元素；

lastElementChild：最后一個(gè)子元素；

previousElementSibling：前一個(gè)同輩元素；

nextElementSibling：后一個(gè)同輩元素；

如：


    list1
    list2
    list3


var ul = document.querySelector("#ulId");
console.log(ul.querySelectorAll("li").length); //3個(gè)list
console.log(ul.childElementCount); //3個(gè)list
console.log(ul.firstElementChild.firstChild.nodeValue); //list1
console.log(ul.lastElementChild.firstChild.nodeValue); //list3
var li = ul.querySelectorAll("li");
var li1 = li[0];
console.log(li1.firstChild.nodeValue); //list1
console.log(li1.nextElementSibling.firstChild.nodeValue); //list2
console.log(li1.nextElementSibling.previousElementSibling.firstChild.nodeValue); //list1

支持 Element Traversal 的瀏覽器有 IE9+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10+