querySelector を二度と使用しない理由。-jsチュートリアル-php.cn

Why I won

JavaScript エコシステムは常に進化しており、将来の新たな波が到来する時期が来ています。

jQuery が document.querySelector() および document.querySelectorAll() としてブラウザーに組み込まれたとき、私たちは皆、それを気に入りました。 DOM メソッドを使用すると、DOM へのアクセスが大幅に向上します。

最近、document.querySelector() と document.querySelectorAll() の両方を使用することは遠い過去に固執しており、JavaScript の多くの魅力的な機能が欠けていることが実際に証明された経験がありました。

document.querySelector() と document.querySelectorAll() を使用すると、DOM を分解できず、DOM に一貫してアクセスでき、複数の選択が簡素化され、入力の難しさが軽減されます。さて、あなたがすでに欠けているものをすべて認識できるように、さらに深く掘り下げてみましょう。

でも待ってください！ querySelector() と querySelectorAll() が何であるかをよく理解しておらず、さらに詳しく知りたい場合。以下のビデオチュートリアルをご覧ください: JavaScript DOM 操作

一貫性のない方法

document.querySelector() と document.querySelectorAll() は、DOM の選択において一貫性がありません。 1 つはターゲットセレクターの最初のインスタンスを選択し、もう 1 つはターゲットセレクターのすべてのインスタンスを選択します。つまり、1 つは個々の要素の選択に使用され、もう 1 つは要素のグループの選択に使用されます。

したがって、両方を同じ意味で使用することはできません。何を選択するかに応じて、次々と切り替えを行う必要があります。

// Select the first element of the class .post
const post = document.querySelector('.post');

// Select all elements of the class .post
const posts = document.querySelectorAll('.post');

ログイン後にコピー

それでは、より良い方法を紹介しましょう。 $select()
に付属する koras.jsx という UI ライブラリを構築しました。これは、JavaScript の document.querySelector() と document.querySelectorAll() の両方の代わりに使用できます。以下にその使用方法を示します。

//select all instances of class .post
const posts = $select('.post');

//select the first instance of class post
const firstPost = $select('.post[0]');

//Doing the same with querySelector

const posts = document.querySelectorAll('.post');
const firstPost = posts[0];

ログイン後にコピー

それはなんてクールなんでしょう？そして、これは document.querySelector() と document.querySelectorAll() の両方のユースケースで機能します。

インデックスによる選択

グループ化された要素の中から任意の位置の要素を選択できます。

//select 6th instance of class post
$select('.post[5]')

//select 7th instance of div elements
$select('div[6]')

ログイン後にコピー

要素の削除

次のように $select() を使用して要素を削除できます。

//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');

//delete all instances of .post with index greater than 2 
$select('.post[delete|i>2]');

ログイン後にコピー

属性の追加

次のように $select() を使用して要素に属性を追加できます。

$select('.post[add|class=hidden]');

$select('.post[add|style=1px solid red]');

$select('.post[add|id=2]');

$select('.post[add|class=flex bold]')

ログイン後にコピー

次のように $select() を使用して要素から属性を削除できます。

$select('.post[remove|class=hidden]');

$select('.post[remove|id]');

$select('.post[remove|class=flex bold]')

$select('.post[remove|style]');

ログイン後にコピー

DOM の構造化

DOM の構造化は es6 に同梱されている機能の 1 つですが、document.querySelector() および document.querySelectorAll() で選択された要素を構造化できないことに驚かれるでしょう。

動作しない:

// Select the first element of the class .post
const post = document.querySelector('.post');

// Select all elements of the class .post
const posts = document.querySelectorAll('.post');

ログイン後にコピー

解決：

//select all instances of class .post
const posts = $select('.post');

//select the first instance of class post
const firstPost = $select('.post[0]');

//Doing the same with querySelector

const posts = document.querySelectorAll('.post');
const firstPost = posts[0];

ログイン後にコピー

見えますか？ document.querySelectAll() は DOM の構造化をサポートしていません。これは、DOM の構造化を逃していることを意味します。いいえ！それはまったくクールではないので、$select() を使い始める必要があります。

反復的な方法

document.querySelect() または document.querySelectorAll() を使用すると、DOM の構造化がサポートされていないため、不必要に繰り返す必要があり、JavaScript コードの保守が少し面倒になります。

機能しません

//select 6th instance of class post
$select('.post[5]')

//select 7th instance of div elements
$select('div[6]')

ログイン後にコピー

したがって、次のことを行う必要があります。

//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');

//delete all instances of .post with index greater than 2 
$select('.post[delete|i>2]');

ログイン後にコピー

それがどれほど反復的であり、コードベースを大規模に保守するのが少し面倒になることがわかりますか?

ほら、以下のように $select() を使って同じことを簡単に行うことができます:

解決

$select('.post[add|class=hidden]');

$select('.post[add|style=1px solid red]');

$select('.post[add|id=2]');

$select('.post[add|class=flex bold]')

ログイン後にコピー

DOM 選択のデバッグの難しさ:

document.querySelector() を使用すると、DOM の構造化と複数選択がサポートされているため、$select() に比べてバグが隠れる表面積が増える傾向があります。

$select('.post[remove|class=hidden]');

$select('.post[remove|id]');

$select('.post[remove|class=flex bold]')

$select('.post[remove|style]');

ログイン後にコピー

$select() は、要素を選択するために書き込むコードの行数を減らし、バグが隠れる表面積を減らします。つまり、$select() を使用すると、比較的早くバグが発見される可能性が高くなります。

すべての配列メソッドを使用する機能。

querySelector で選択された要素は forEach でのみ機能し、map()、filter()、および co では機能しません。

$select() は、不必要な繰り返しと大規模な複雑さを引き起こす可能性があるいくつかの回避策を必要とする document.querySelectorAll() とは異なり、デフォルトですべての配列メソッドで動作します。

保守性

保守性は常に、使いやすさ、簡潔さ、一貫性を中心に展開されます。簡潔で一貫性があり、使いやすいコードベースは保守しやすい傾向があります。特にバグを修正したり機能を構築したりするときには、注目すべき表面積が増えるため、反復的で冗長なコードを維持するのは面倒です。

送料を減らすJavaScript

可能な限り JavaScript の配布を減らすのが経験則であり、$select() を使用すると、DOM 選択を処理しながらそれが可能になります。 $select() は、より簡潔で繰り返しが少ないため、大規模な場合は document.querySelector() および document.querySelectorAll() よりも推奨されます。選択する要素が増えるほど、$select() で選択を繰り返す回数が減ります。

要素の配列を追加または先頭に追加します。

DOM は NodeList を想定しているため、$select() によって生成された要素の配列を element.append(arrayGeneratedBy$Select) のような別の要素に追加することはできません。

それでも、$select() に 2 番目のパラメーターとして false を渡すことで、そのスーパーパワーをすべて無効にするように指示できます。

 const [posts, comments] = document.querySelectorAll('.post, .comment');

ログイン後にコピー

これで、追加可能および先頭に追加可能な通常の DOM NodeList[] が返されます。

$select() はそれを行うことができます

$select() が document.querySelect() または document.querySelectorAll() でできるすべてのことを実行できるかどうか興味があるかもしれません。はい！彼らがやることは何でもできるのです。 $select() はすべてを実行できます。 tagor CSS セレクターを使用し、query.querySelector() で実行できる他のすべてのことを実行できます。