JavaScript DOM擴展——“選擇符API和元素遍歷”的注意要點

justCoding 發布于2019-08-19 17:13 / 557人閱讀

摘要：實際上，的核心就是通過選擇符查詢文檔取得元素的引用。方法該方法接收一個選擇符，返回的是所有匹配的元素而不僅僅是一個元素。而其底層實現則類似于一組元素的快照，而非不斷對文檔進行搜索的動態查詢。

選擇符API

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

querySelector()方法

該方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回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
}

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

querySelectorAll()方法

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

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

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

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

matchesSelector()方法

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

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規范

對于元素間的空格，各瀏覽器會做出不同反應，就導致了在使用childNodes和firstChild等屬性時的行為不一致。

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

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

firstElementChild：第一個子元素；

lastElementChild：最后一個子元素；

previousElementSibling：前一個同輩元素；

nextElementSibling：后一個同輩元素；

如：


    list1
    list2
    list3


var ul = document.querySelector("#ulId");
console.log(ul.querySelectorAll("li").length); //3個list
console.log(ul.childElementCount); //3個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+

GPU云服務器云服務器 javascript的dom對象 javascript的dom編程 javascript dom javascript dom 編程藝術

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

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

JavaScript DOM擴展——“專有擴展”的注意要點

摘要：另外，以及這兩個方法，在測試了一下，并無反應。不知是否兼容問題。下面是獲得焦點的時候，自動以每毫秒的速度往下滾屏文檔模式頁面的文檔模式是由IE8引入的，文檔模式決定了可以使用的CSS級別、JS中的API以及如何對待文檔類型（doctype）；在IE9，提供了4中文檔模式： IE5：混雜模式； IE7：IE7標準模式渲染頁面； IE8：IE8標準模式渲染頁面，可以使用Selecto...

wudengzan 2019-08-19 17:15 評論0 收藏0
JavaScript DOM擴展——“HTML5”的注意要點

摘要：如他返回的對象是。方法，這個方法用于確定文檔是否獲得了焦點。另外，需要注意的是，該屬性插入元素并不會執行其中的腳本。在中，方法接收一個字符串，返回一個經過無害處理后的版本。屬性同樣的，在讀模式下返回調用它的元素及所有子節點的標簽。與類相關的擴充 getElementsByClassName()方法接收一個參數，即一個或多個類名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 評論0 收藏0
JavaScript DOM2和DOM3——“DOM的變化”的注意要點

摘要：和級分為許多模塊，分別描述了的某個非常具體的子集。這些模塊主要有核心視圖事件樣式遍歷和范圍以及。另外還有方法和方法框架的變化框架和內嵌框架分別用和表示，它們在級中都有一個新屬性這個屬性包含一個指針，指向表示框架內容的文檔對象。 DOM2和DOM3級分為許多模塊，分別描述了DOM的某個非常具體的子集。這些模塊主要有核心（Core）、視圖（Views）、事件（Events）、樣式（Styl...

騫諱護 2019-08-19 17:14 評論0 收藏0
JavaScript DOM2和DOM3——“遍歷”的注意要點

摘要：級遍歷和范圍模塊定義了兩個用于輔助完成順序遍歷結構的類型和這兩個類型能夠基于給定的起點對結構執行深度優先的遍歷操作。其中的屬性，表示任何遍歷方法在上一次遍歷中返回的接待你。通過設置這個屬性也可以修改遍歷繼續進行的節點。 DOM2級遍歷和范圍模塊定義了兩個用于輔助完成順序遍歷DOM結構的類型：NodeIterator和TreeWalker；這兩個類型能夠基于給定的起點對DOM結構執行深度...

antz 2019-08-19 17:17 評論0 收藏0