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

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

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.

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.

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

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

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

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.

Analyse approfondie des sélecteurs is et Where : amélioration du niveau de programmation CSS Analyse approfondie des sélecteurs is et Where : amélioration du niveau de programmation CSS Sep 08, 2023 pm 08:22 PM

Analyse approfondie des sélecteurs is et Where : améliorer le niveau de programmation CSS Introduction : Dans le processus de programmation CSS, les sélecteurs sont un élément essentiel. Ils nous permettent de sélectionner et de styliser les éléments d'un document HTML en fonction de critères spécifiques. Dans cet article, nous allons approfondir deux sélecteurs couramment utilisés, à savoir : le sélecteur est et le sélecteur où. En comprenant leurs principes de fonctionnement et leurs scénarios d'utilisation, nous pouvons considérablement améliorer le niveau de programmation CSS. 1. ce sélecteur est un choix très puissant

See all articles