バニラJavascriptのDOM操作の基本（jqueryなし）

この記事は、

現代のJavaScript Anthologyの一部であり、DOM操作のためのVanilla JavaScriptの機能を探り、JQueryの堅牢な代替品であることを示しています。 SitePoint Premiumを介して完全なアンソロジーにアクセスします

jQueryは多くの場合、DOM操作の頼りになりますが、Vanilla JavaScriptは効率的なネイティブ方法を提供します。この記事では、主要なDOM操作タスクについて説明します。DOMのクエリと変更、クラスと属性の管理、イベント処理、アニメーションについて説明します。 最後に、軽量のカスタムDOMライブラリを構築します

キーテイクアウト：

Vanilla JavaScriptは、特にIEサポートの減少に関連する強力なDOM操作ツールを提供します。

および
• は、効率的な要素選択を提供します。前者は最初の試合を返し、後者はすべてのマッチをノデリストとして返します。
メソッドを使用して要素のクラスと属性を直接変更し、
• を使用して、DOMとHTML属性を操作するパフォーマンスへの影響を理解します。 イベントの取り扱いには.querySelector()使用して、単一の要素でさまざまなタイプの複数のリスナーを有効にして、.querySelectorAll()。 ヘルパー関数またはミニライブラリーを作成して繰り返しDOMタスクを処理し、ネイティブJavaScriptを使用してJQueryの利便性を複製することにより、パフォーマンスとコードの明確さを改善します。
• .classListdom操作：dom .setAttribute()
の照会
• （注：この記事では、バニラDOM APIの高レベルの概要を説明します。包括的な詳細については、Mozilla開発者ネットワークを参照してください。）.addEventListener() .onclick
を使用して、CSSセレクターを使用して要素をターゲットにします
これにより、最初の一致する要素が選択されます。

要素がセレクターと一致するかどうかをチェックします：

一致するすべての要素を取得します：

親要素内でのクエリは、パフォーマンスを向上させます：

.querySelector()

<code class="language-javascript">const myElement = document.querySelector('#foo > div.bar');</code>

、

などの方法のライブコレクションとは異なり、静的ノデリストを返しますが、これは動的に更新されません。 これにはパフォーマンスに影響を与え、明示的な反復が必要です .matches()

ノデリストとの作業

<code class="language-javascript">myElement.matches('div.bar') === true;</code>

.querySelectorAll()

アレイではなく、ノデリストを返します。 標準配列メソッドの配列に変換してください：

<code class="language-javascript">const myElements = document.querySelectorAll('.bar');</code>

<code class="language-javascript">const myElement = document.querySelector('#foo > div.bar');</code>

、children、firstElementChild、nextElementSiblingなどのNodeListプロパティは、関連するノードへの便利なアクセスを提供します。 要素だけでなく、すべてのノードタイプが含まれることを忘れないでください。 ノードタイプを確認するには、childNodesまたはnodeTypeを使用してください。instanceof

クラスと属性の変更

効率的なクラス操作のためのメソッドを使用：

.classList

要素プロパティに直接アクセスして変更します：

<code class="language-javascript">myElement.matches('div.bar') === true;</code>

<code class="language-javascript">const myElements = document.querySelectorAll('.bar');</code>

、

、および.getAttribute().setAttribute()cssスタイルの追加.removeAttribute()

ラクダに覆われたプロパティ名を使用してスタイルを適用してください：

計算されたスタイルの値を取得：

<code class="language-javascript">const myChildElement = myElement.querySelector('input[type="submit"]');</code>

.window.getComputedStyle()dom

<code class="language-javascript">Array.from(myElements).forEach(doSomethingWithEachElement);</code>

の変更 要素操作には

コピーを作成します。深いクローン化のためにブール引数を使用します。 。

要素プロパティ：innerhtmlおよびtextcontent appendChild()insertBefore() それぞれremoveChild()cloneNode()およびcreateElement()HTMLとプレーンテキストのコンテンツをそれぞれ管理します。 コンテンツを完全に変更するcreateTextNode()の変更。

を使用してAppendingは、個々のノードを追加するよりも効率が低いです。 複数の付録を最適化するには、

を使用してください イベントを聞く

.innerHTML柔軟性と複数のリスナーのために、イベントプロパティ（例：.textContent）に直接割り当てることを好みます。 トリガーされた要素にアクセスするには、.innerHTMLを使用します。 .innerHTML =デフォルトアクションを防ぎます。 DocumentFragmentイベントバブルを停止します。 オプションの3番目の引数は、構成オプションを提供します（

、

、）。 イベント委任により効率が向上し、動的に追加された要素を処理します

アニメーション

.addEventListener() onclickスムーズなアニメーションにはevent.targetを使用して、レイアウトスラッシングを回避します。.preventDefault() .stopPropagation()addEventListener()独自のヘルパーメソッドを書くcaptureonce passiveJQueryの便利さを反映して、DOM操作を合理化するカスタムヘルパー関数を作成します。 この例は、基本的なカスタム

関数を示しています：

これにより、Vanilla JavaScriptの利点を保持しながら、より簡潔なコードが可能になります。

結論

requestAnimationFrame()

Vanilla JavaScriptは、堅牢なDOM操作機能を提供し、多くの場合、外部ライブラリの必要性を排除します。 一部の側面ではjQueryよりも冗長コードが必要になる場合がありますが、カスタムヘルパー関数を作成すると、このギャップを埋めることができ、効率的でクリーンなDOM操作が可能になります。 選択は、プロジェクトのニーズと開発者の好みに依存します

（faqsセクションは簡潔にして省略されていますが、入力で提供される情報は既に上にカバーされています。）

以上がバニラJavascriptのDOM操作の基本（jqueryなし）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。