ホームページ ウェブフロントエンド jsチュートリアル JavaScript は独自の DOM セレクター原理と code_javascript スキルを実装します

JavaScript は独自の DOM セレクター原理と code_javascript スキルを実装します

May 16, 2016 pm 05:41 PM
dom セレクタ

インタプリタ モード (インタプリタ): 構文形式を定義し、プログラム解釈を通じてそれを実行し、対応するタスクを完了します。フロントエンド プログラミング シナリオでは、インタープリター モードを適用して 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
//调用原生选择器
if(!simple.test(query) && context.querySelectorAll){
return context.querySelectorAll(query);
}else {
//调用自定义选择器
return replace( query, context);
}
}
//解释実行dom选择符
function replace(query, context){
var Parts = query.replace(/s /, " " ).split(" ");
var パート = Parts.pop();
var ret = selector.find(context); (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 (セレクター) {
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 (セレクター) {
var regex = /^([w*-_] )/;
return regex.test(selector);
};
//类选择器
function ClassSelector(className) {
var splits = className.split('.');
this.tagName = スプリット[0] ||未定義 ;
this.className = splits[1];
}
ClassSelector.prototype = {
find: function (context) {
var 要素;
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){
要素を返します。
}
for(var i=0,n=elements.length; iif( selector.match(elements[i]) ){
ret.push(要素[i]);
}
}
} else {
elements = selector.find(context);
for(var i=0, n=elements.length; iif( this.match(elements[i]) ) {
ret.push(elements[i] );
}
}
}
ret を返します。
},
match: function(element){
var className = this.className;
var regex = new RegExp("^|\s" className "$|\s");
return regex.test(element.className);
}
};
ClassSelector.test = function (セレクター) {
var regex = /^([w-_] )?.([w-_] )/;
return regex.test(selector);
};
//TODO: プロパティ选择器
function AttributeSelector(attr){
this.find = function(context){
};
this.match = function(element){
};
}
AttributeSelector.test = function (セレクター){
var regex = /[([w-_] )(?:=([w-_] ))?]/;
return regex.test(selector);
};
//根据父级元素过滤
function filter(parts, nodeList){
var part = Parts.pop();
var selector = Factory.create(part);
var ret = [];
var 親;
for(var i=0, n=nodeList.length; iparent = nodeList[i].parentNode;
while(parent &&parent !== doc){
if(selector.match(parent)){
ret.push(nodeList[i]);
休憩;
}
parent =parent.parentNode;
}
}
return Parts[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 {
return new TagSelector(query);
}
}
};
ns.dom || (ns.dom = {});
ns.dom.get = API;
}(これ));

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue3 で DOM ノードを取得する方法は何ですか? Vue3 で DOM ノードを取得する方法は何ですか? May 11, 2023 pm 04:55 PM

1. ネイティブ js は DOM ノードを取得します。 document.querySelector (セレクター) document.getElementById (id セレクター) document.getElementsByClassName (クラス セレクター).... 2. vue2 で現在のコンポーネントのインスタンス オブジェクトを取得します。コンポーネント インスタンスには、対応する DOM 要素またはコンポーネントへの参照を保存する $refs オブジェクトが含まれています。したがって、デフォルトでは、コンポーネントの $refs は空のオブジェクトを指します。まず ref="name" をコンポーネントに追加してから、this.$refs を渡します。

PHP での DOM 操作ガイド PHP での DOM 操作ガイド May 21, 2023 pm 04:01 PM

Web 開発において、DOM (DocumentObjectModel) は非常に重要な概念です。これにより、開発者は要素の追加、削除、変更など、Web ページの HTML または XML ドキュメントを簡単に変更および操作できるようになります。 PHP に組み込まれている DOM 操作ライブラリも開発者向けに豊富な機能を提供していますので、この記事では、皆様のお役に立てればと思い、PHP での DOM 操作ガイドを紹介します。 DOM の基本概念 DOM は、クロスプラットフォームで言語に依存しない API です。

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 :nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 Nov 20, 2023 am 11:20 AM

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: <divid="container" ><divclass="item"&gt ;最初の子要素</div><divclass="item"&

JavaScript セレクターが失敗した場合の対処方法 JavaScript セレクターが失敗した場合の対処方法 Feb 10, 2023 am 10:15 AM

コードが標準化されていないため、JavaScript セレクターが失敗します。解決策は、 1. インポートされた JS コードを削除すると、ID セレクター方式が有効になります。 2. 「jquery.js」を導入する前に、指定された JS コードを導入するだけです。

vue3 で dom またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか? vue3 で dom またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか? May 12, 2023 pm 01:28 PM

Vue3ref バインディング DOM またはコンポーネントの失敗理由分析シナリオの説明 Vue3 では、コンポーネントまたは DOM 要素をバインドするために ref を使用することがよくありますが、関連するコンポーネントをバインドするために ref が明確に使用されていることがよくありますが、ref バインディングが失敗することがよくあります。 ref バインディングが失敗する状況の例 ref バインディングが失敗するほとんどのケースは、ref がコンポーネントにバインドされているときにコンポーネントがまだレンダリングされていないため、バインディングが失敗することです。または、コンポーネントが最初にレンダリングされず、ref がバインドされていない場合、コンポーネントのレンダリングが開始されると、ref もバインドされ始めますが、ref とコンポーネントの間のバインディングが完了していません。このとき、問題が発生します。コンポーネント関連のメソッドを使用する場合。 ref にバインドされたコンポーネントが v-if を使用するか、その親コン​​ポーネントが v-if を使用してページに

初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする 初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする Sep 08, 2023 am 09:15 AM

初心者から上級者まで: is および where セレクターの使用スキルをマスターする はじめに: データの処理と分析のプロセスにおいて、セレクターは非常に重要なツールです。セレクターを使用すると、特定の条件に従ってデータセットから必要なデータを抽出できます。この記事では、読者がこれら 2 つのセレクターの強力な機能をすぐに習得できるように、is および where セレクターの使用スキルを紹介します。 1. is セレクターの使用 is セレクターは、与えられた条件に基づいてデータセットを選択できるようにする基本的なセレクターです。

dom オブジェクトと bom オブジェクトとは何ですか? dom オブジェクトと bom オブジェクトとは何ですか? Nov 13, 2023 am 10:52 AM

DOM オブジェクトは「ドキュメント」、「要素」、「ノード」、「イベント」、「ウィンドウ」の 5 つ、2.「ウィンドウ」、「ナビゲーター」、「場所」、「履歴」、「画面」、その他 5 つです。 BOM オブジェクト。

ボムとドムの違いは何ですか ボムとドムの違いは何ですか Nov 13, 2023 pm 03:23 PM

BOM と DOM は、役割と機能、JavaScript との関係、相互依存性、さまざまなブラウザーの互換性、セキュリティ上の考慮事項の点で異なります。詳細な紹介: 1. 役割と機能: BOM の主な機能はブラウザ ウィンドウを操作することであり、ブラウザ ウィンドウへの直接アクセスと制御を提供しますが、DOM の主な機能は Web ドキュメントをオブジェクト ツリーに変換し、開発者は、このオブジェクト ツリーを使用して Web ページの要素やコンテンツを取得および変更します。 2. JavaScript などとの関係

See all articles