Maison interface Web js tutoriel JavaScript实现自己的DOM选择器原理及代码_javascript技巧

JavaScript实现自己的DOM选择器原理及代码_javascript技巧

May 16, 2016 pm 05:41 PM
dom 选择器

解释器模式(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; iif( selector.match(elements[i]) ){
ret.push(elements[i]);
}
}
} else {
elements = selector.find(context);
for(var i=0, n=elements.length; iif( this.match(elements[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; iparent = nodeList[i].parentNode;
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));
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Quels sont les moyens d'obtenir des nœuds DOM dans Vue3 Quels sont les moyens d'obtenir des nœuds DOM dans Vue3 May 11, 2023 pm 04:55 PM

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.

Guide de manipulation du DOM en PHP Guide de manipulation du DOM en PHP May 21, 2023 pm 04:01 PM

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 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 Nov 20, 2023 am 11:20 AM

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"&gt ;Premier élément enfant</div><divclass="item"&

Que faire si le sélecteur javascript échoue Que faire si le sélecteur javascript échoue Feb 10, 2023 am 10:15 AM

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".

Quelle est la raison pour laquelle la liaison ref à dom ou composant échoue dans vue3 et comment la résoudre Quelle est la raison pour laquelle la liaison ref à dom ou composant échoue dans vue3 et comment la résoudre May 12, 2023 pm 01:28 PM

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îtrisez les compétences d'utilisation des sélecteurs et où Du débutant au compétent : maîtrisez les compétences d'utilisation des sélecteurs et où Sep 08, 2023 am 09:15 AM

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.

Que sont les objets dom et bom ? Que sont les objets dom et bom ? Nov 13, 2023 am 10:52 AM

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.

Quelle est la différence entre bom et dom Quelle est la différence entre bom et dom Nov 13, 2023 pm 03:23 PM

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.

See all articles