JavaScript實作自己的DOM選擇器原理及程式碼_javascript技巧
解釋器模式(Interpreter):定義一種語法格式,透過程式解釋執行它並完成對應的任務。在前端程式場景中可以應用解釋器模式來解釋CSS選擇符實現DOM元素的選擇。
開放封閉原則:物件導向中的開放封閉原則是類別或模組應該對擴充開放對修改封閉,在這個dom選擇器中實作id選擇器,元素選擇器,類別選擇器,如果以後需要屬性選擇器的話定義一個屬性選擇器實作對應的方法,同時在簡單工廠中增加對應的建立屬性選擇器物件分支即可。
匹配原理:瀏覽器在匹配CSS選擇符時是按照從右到左匹配的,所以實現自己的DOM選擇器時匹配行為也應該和瀏覽原生匹配行為一致。
代碼:
(function (ns) {
/*
//tagName
console.log(dom.get("p"));
//#id
console.log(dom.get("#div"))
//.class
console.log(dom.get(".span", document.body));
//標籤. class
console.log(dom.get("div.span"));
//#id .class
console.log(dom.get("#div .span"));
//.class .class
console.log(dom.get(".ul .li-test"));
*/
var doc = document
var simple = /^ (?:#|.)?([w-_] )/;
function api(query, context) {
context = context || doc;
//呼叫選擇器
if (!simple.test(query) && context.querySelectorAll){
return context.querySelectorAll(query);
}else {
//呼叫自訂選擇器
returnterpret( query, context) ;
}
}
//解釋執行dom選擇子
functionterpret(query, context){
var parts = query.replace(/s /, " " ).split(" ");
var 部分= parts.pop();
var 選擇器= Factory.create(part);
var ret = 選擇器.find(context); (parts[0] && ret [0]) ? filter(parts, ret) : ret
}
//ID選擇器
function IDSelector(id) {
this.id = id; .substring(1);
}
IDSelector.prototype = {
找出:函數(上下文){
return document.getElementById(this.id);
},
match: function(element){
return element.id == this.id;
}
};
IDSelector.test = 函數(選取器){
var regex = /^#([w-_] ) /;
返回regex.test(選擇器);
};
//元素選擇器
function TagSelector(tagName) {
this.tagName = tagName.toUpperCase();
}
TagSelector.prototype = {
find: function (context) {
return context.getElementsByTagName(this.tagName);
},
匹配:函數(元素){
傳回this.tagName == element.tagName.toUpperCase() || this.tagName === "*";
}
};
TagSelector.test = 函數(選擇器){
var regex = /^([w*-_] )/;
返回regex.test(選擇器);
};
//類別選擇器
function ClassSelector(className) {
var splits = className.split('.');
this.tagName = splits[0] ||不明確的;
this.className = splits[1];
}
ClassSelector.prototype = {
find: function (context) {
var elements;
var ret = [];
var tagName = this.tagName;
var className = this. className;
var 選擇器= new TagSelector((tagName || "*"));
//支援原生getElementsByClassName
if (context.getElementsByClassName) {
elements = context.getElementsByClassName(className );
if(!tagName){
回傳元素;
}
for(var i=0,n=elements.length; i
ret.push(元素[i]);
}
}
} else {
elements = 選擇器.find(context) ;
for(var i=0, n=elements.length; i
ret.push(elements[i ] );
}
}
}
回傳ret;
},
配對:函數(元素){
var className = this.className;
var regex = new RegExp("^|\s" className "$|\s");
傳回regex.test(element.className);
}
};
ClassSelector.test = 函數(選擇器){
var regex = /^([w-_] )?.([w-_] )/;
返回regex.test(選擇器);
};
//TODO: 屬性選擇器
function AttributeSelector(attr){
this.find = function(context){
};
this.match = function(element){
};
this.match = function(element){
} ;
}
AttributeSelector.test = 函數(選擇器){
var regex = /[([w-_] )(?:=([w-_] ))?]/;
回傳regex.test(選擇器);
};
//依父級元素過濾
function filter(parts, nodeList){
var part = parts.pop();
var 選擇器= Factory.create(part);
var ret = [];
var 父級;
for(var i=0, n=nodeList.length; i
while(parent &&parent !== doc){
if(selector.match(parent)){
ret.push(nodeList[iector.match(parent)){
ret.push(nodeList[iector.match(parent)){
ret.push(nodeList[iector.match(parent)){
ret.push(nodeList[iector。match(parent) ]);
休息;
}
parent =parent.parentNode;
}
}
返回零件[0] && ret[0] ?過濾器(零件,ret) :ret;
}
//根據查詢選擇子建立對應選擇器物件
var Factory = {
create: function (query) {
if (IDSelector.test(query)) {
回傳新的IDSelector(查詢);
} else if (ClassSelector.test(query)) {
return new ClassSelector(query);
} else {
傳回新的TagSelector (query);
}
}
};

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式,具體程式碼範例如下:HTML程式碼:<divid="container"><divclass="item"> ;第一個子元素</div><divclass="item"&

vue3ref綁定dom或元件失敗原因分析場景描述在vue3中常用到使用ref綁定元件或dom元素的情況,很多時候,明明使用ref綁定了相關元件,但是經常ref綁定失敗的情況。 ref綁定失敗情況舉例ref綁定失敗的絕大多數情況是,在ref和元件綁定的時候,該元件還未渲染,所以綁定失敗。或是元件剛開始未渲染,ref未綁定,當元件開始渲染,ref也開始綁定,但是ref和元件並未綁定完成,這個時候使用元件相關的方法就會出現問題。 ref綁定的元件使用了v-if,或他的父元件使用了v-if導致頁面

1.原生js取得DOM節點:document.querySelector(選擇器)document.getElementById(id選擇器)document.getElementsByClassName(class選擇器)....2.vue2中取得目前元件的實例物件:因為每個vue的元件實例上,都包含一個$refs對象,裡面儲存著對應的DOM元素或元件的參考。所以在預設情況下,元件的$refs指向一個空物件。可以先在元件上加上ref="名字",然後透過this.$refs.

javascript選擇器失效是因為程式碼不規範導致的,其解決方法:1、把引入的JS程式碼去掉,ID選擇器方法即可有效;2、在引入「jquery.js」之前引入指定JS程式碼即可。

dom和bom物件有:1、「document」、「element」、「Node」、「Event」和「Window」等5種DOM物件;2、「window」、「navigator」、「location」、「history」和「screen」等5種BOM物件。

在網頁開發中,DOM(DocumentObjectModel)是一個非常重要的概念。它可以讓開發者輕鬆地對一個網頁的HTML或XML文件進行修改和操作,例如新增、刪除、修改元素等。而PHP內建的DOM操作庫也為開發者提供了豐富的功能,本文將介紹PHP中的DOM操作指南,希望可以幫助大家。 DOM的基本概念DOM是一個跨平台、獨立於語言的API,它可以將

bom和dom在作用和功能、與JavaScript的關係、相互依賴性、不同瀏覽器的兼容性和安全性考量等方面都有區別。詳細介紹:1、作用和功能,BOM的主要作用是操作瀏覽器窗口,它提供了瀏覽器窗口的直接訪問和控制,而DOM的主要作用則是將網頁文檔轉換為一個對象樹,允許開發者透過這個物件樹來取得和修改網頁的元素和內容;2、與JavaScript的關係等等。

lxml是一個功能強大的Python庫,用於處理XML和HTML文件。作為解析工具,它提供了多種選擇器來幫助使用者方便地從文件中提取所需的資料。本文將詳細介紹lxml支援的選擇器。 lxml支援以下幾種選擇器:標籤選擇器(ElementTagSelector):透過標籤名稱來選擇元素。例如,透過使用<tagname>來選擇具有特定標籤名稱的元
