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));
//tag.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 {
//调用自定义选择器
return interpret(query, context);
}
}
//解释执行dom选择符
function interpret(query, context){
var parts = query.replace(/\s+/, " ").split(" ");
var part = parts.pop();
var selector = Factory.create(part);
var ret = selector.find(context);
return (parts[0] && ret[0]) ? filter(parts, ret) : ret;
}
//ID选择器
function IDSelector(id) {
this.id = id.substring(1);
}
IDSelector.prototype = {
find: function (context) {
return document.getElementById(this.id);
},
match: function(element){
return element.id == this.id;
}
};
IDSelector.test = function (selector) {
var regex = /^#([\w\-_]+)/;
return regex.test(selector);
};
//元素选择器
function TagSelector(tagName) {
this.tagName = tagName.toUpperCase();
}
TagSelector.prototype = {
find: function (context) {
return context.getElementsByTagName(this.tagName);
},
match: function(element){
return this.tagName == element.tagName.toUpperCase() || this.tagName === "*";
}
};
TagSelector.test = function (selector) {
var regex = /^([\w\*\-_]+)/;
return regex.test(selector);
};
//类选择器
function ClassSelector(className) {
var splits = className.split('.');
this.tagName = splits[0] || undefined ;
this.className = splits[1];
}
ClassSelector.prototype = {
find: function (context) {
var elements;
var ret = [];
var tagName = this.tagName;
var className = this.className;
var selector = new TagSelector((tagName || "*"));
//支持原生getElementsByClassName
if (context.getElementsByClassName) {
elements = context.getElementsByClassName(className);
if(!tagName){
return elements;
}
for(var i=0,n=elements.length; i
ret.push(elements[i]);
}
}
} else {
elements = selector.find(context);
for(var i=0, n=elements.length; i
ret.push(elements[i]);
}
}
}
return ret;
},
match: function(element){
var className = this.className;
var regex = new RegExp("^|\\s" + className + "$|\\s");
return regex.test(element.className);
}
};
ClassSelector.test = function (selector) {
var regex = /^([\w\-_]+)?\.([\w\-_]+)/;
return regex.test(selector);
};
//TODO:属性选择器
function AttributeSelector(attr){
this.find = function(context){
};
this.match = function(element){
};
}
AttributeSelector.test = function (selector){
var regex = /\[([\w\-_]+)(?:=([\w\-_]+))?\]/;
return regex.test(selector);
};
//根据父级元素过滤
function filter(parts, nodeList){
var part = parts.pop();
var selector = Factory.create(part);
var ret = [];
var parent;
for(var i=0, n=nodeList.length; i
while(parent && parent !== doc){
if(selector.match(parent)){
ret.push(nodeList[i]);
break;
}
parent = parent.parentNode;
}
}
return parts[0] && ret[0] ? filter(parts, ret) : ret;
}
//根据查询选择符创建相应选择器对象
var Factory = {
create: function (query) {
if (IDSelector.test(query)) {
return new IDSelector(query);
} else if (ClassSelector.test(query)) {
return new ClassSelector(query);
} else {
return new TagSelector(query);
}
}
};
ns.dom || (ns.dom = {});
ns.dom.get = api;
}(this));

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

1. Native js obtient le nœud DOM : document.querySelector (sélecteur) document.getElementById (sélecteur d'identifiant) document.getElementsByClassName (sélecteur de classe).... 2. Récupère l'objet instance du composant actuel dans vue2 : car chaque vue Chaque L'instance de composant contient un objet $refs, qui stocke les références aux éléments ou composants DOM correspondants. Ainsi, par défaut, les $refs du composant pointent vers un objet vide. Vous pouvez d'abord ajouter ref="name" au composant, puis transmettre this.$refs.

Dans le développement web, DOM (DocumentObjectModel) est un concept très important. Il permet aux développeurs de modifier et d'exploiter facilement le document HTML ou XML d'une page Web, comme ajouter, supprimer, modifier des éléments, etc. La bibliothèque d'opérations DOM intégrée à PHP fournit également aux développeurs des fonctions riches. Cet article présentera le guide d'opérations DOM en PHP, dans l'espoir d'aider tout le monde. Le concept de base de DOM DOM est une API multiplateforme indépendante du langage qui peut

Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3. L'exemple de code spécifique est le suivant : Code HTML : <divid="container" ><divclass="item"> ;Premier élément enfant</div><divclass="item"&

Le sélecteur JavaScript échoue car le code n'est pas standardisé. La solution est la suivante : 1. Supprimez le code JS importé et la méthode de sélection d'ID sera efficace ; 2. Introduisez simplement le code JS spécifié avant d'introduire "jquery.js".

Description du scénario d'analyse de la raison de défaillance d'un composant ou du DOM de liaison Vue3ref Dans Vue3, il est souvent utilisé pour utiliser ref pour lier des composants ou des éléments DOM. Plusieurs fois, ref est clairement utilisé pour lier des composants associés, mais la liaison ref échoue souvent. Exemples de situations d'échec de liaison de référence La grande majorité des cas où la liaison de référence échoue est lorsque la référence est liée au composant, le composant n'a pas encore été rendu, donc la liaison échoue. Ou le composant n'est pas rendu au début et la référence n'est pas liée. Lorsque le composant commence à être rendu, la référence commence également à être liée, mais la liaison entre la référence et le composant n'est pas terminée. À ce stade, des problèmes surviendront. lors de l'utilisation de méthodes liées aux composants. Le composant lié à ref utilise v-if, ou son composant parent utilise v-if pour provoquer l'affichage de la page.

Du débutant au compétent : Maîtriser les compétences d'utilisation des sélecteurs est et où Introduction : Dans le processus de traitement et d'analyse des données, le sélecteur est un outil très important. Grâce à des sélecteurs, nous pouvons extraire les données requises de l'ensemble de données selon des conditions spécifiques. Cet article présentera les compétences d'utilisation des sélecteurs est et où pour aider les lecteurs à maîtriser rapidement les fonctions puissantes de ces deux sélecteurs. 1. Utilisation du sélecteur is Le sélecteur is est un sélecteur de base qui nous permet de sélectionner l'ensemble de données en fonction de conditions données.

Il existe 5 objets DOM dont « document », « élément », « nœud », « événement » et « fenêtre » 2. « fenêtre », « navigateur », « emplacement » et « historique » et « écran » et 5 autres ; types d'objets de nomenclature.

BOM et DOM sont différents en termes de rôle et de fonction, de relation avec JavaScript, d'interdépendance, de compatibilité des différents navigateurs et de considérations de sécurité. Introduction détaillée : 1. Rôle et fonction. La fonction principale de BOM est de faire fonctionner la fenêtre du navigateur. Il fournit un accès et un contrôle directs à la fenêtre du navigateur, tandis que la fonction principale de DOM est de convertir le document Web en une arborescence d'objets. les développeurs doivent utiliser cette arborescence d'objets pour obtenir et modifier les éléments et le contenu de la page Web ; 2. Relation avec JavaScript, etc.
