JQuery を使用して WordPress で DOM を操作する

公開: 2023-02-12

WordPress のオープンソースプラットフォームと活発な開発者コミュニティのおかげで、プラットフォームのテーマを作成することは非常に幅広い魅力があります。ただし、プログラミングの知識と経験によっては、WordPress サイトを構築するために必要なすべての要素とコンテンツをナビゲートするのは難しい場合があります。

幸いなことに、ドキュメントオブジェクトモデル (DOM) を使用すると、サイトの HTML コードの操作や移動が簡単になります。 DOM は、さまざまなノードまたはオブジェクトで構成されるツリーを作成できるようにすることで機能します。これにより、jQuery などの JavaScript ライブラリを使用して、サイトの表示、構造、または機能を変更する機会が開かれます。

この記事では、DOM とは何か、なぜそれを使用する必要があるのかについて説明します。次に、WordPress で DOM を使用するための標準的な jQuery 操作テクニックをいくつか紹介します。さっそく飛び込みましょう！

DOM とは

簡単に言えば、DOM は HTML のアプリケーションプログラミングインターフェイス (API) です。 Web ページのコンテンツと構造を表すオブジェクトのツリーを作成します。また、プラットフォームや言語に依存しないスクリプトであるため、非常に用途が広いです。 DOM がこのように HTML ソースコードを表すと、アクセス可能になり、さまざまなプログラミング言語が接続できるようになります。

DOM を使用する理由

WordPress ユーザーは、動的な対話性に遭遇するたびに DOM が動作しているのを見ているでしょう。これには、情報が不足しているフォームが送信された場合にエラーが返される場合が含まれる場合があります。コンテンツスライダーは、使用されている DOM の別の例です。

開発者は DOM を使用して、Web ページ上のほぼすべての要素を更新および変更できます。これを使用して、ドキュメントを作成し、その構造をナビゲートできます。 DOM を使用して、要素やオブジェクトを追加、変更、または削除することもできます。

JQuery による DOM 操作

明確にするために、DOM と HTML は同じ要素を含む必要がありますが、同じではありません。 DOM は、HTML ソースコードのモデル化された表現であり、クライアント側の JavaScript によって変更できます。

以下では、いくつかの DOM 操作テクニックをテストするための jQuery ライブラリーのメソッドを見ていきます。さまざまなブラウザが独自の方法で DOM を処理しますが、それを使い始めるために特別なことをする必要はありません。すべてのブラウザーは、何らかの形式の DOM を使用して、JavaScript からページにアクセスできるようにします。

DOM 操作テクニック

DOM はさまざまな方法で使用できます。その柔軟性を説明するために、この便利な API を使い始めるための 6 つのテクニックを見てみましょう。

1. Before() メソッド

その名の通りbefore()メソッドは、コードに示されているように、別のターゲット要素の前に要素を挿入するときに使用されます。

この例では、このメソッドを使用して、ボタンなどの指定された要素がクリックされると、その上にテキストを含む正方形の要素を追加できます。

 $(this).before( "<div class='square'>別の正方形</div>" );

この方法を使用する場合は、ページの配置とレイアウトに留意する必要があります。新しい要素がレイアウトを壊したり、視覚的に問題を引き起こしたりしないようにする必要があります。

2. After() メソッド

before()メソッドを使用すると、指定された別の要素の前に要素を挿入できるのと同じように、 after()メソッドを使用すると、その逆が可能になります。たとえば、ボタンが選択されると、ボタンのすぐ下に要素を追加するために使用できます。

 $(this).after( "<div class='square'>別の正方形</div>" );

このように jQuery で DOM を操作してインタラクティブなコンテンツを追加することは、プロセスの速度を落とさずにインタラクティブ性を得る確実な方法です。

3. Append() メソッド

個々の新しい要素を表示する代わりに、新しい要素を既存の要素に追加したい場合があります。たとえば、「Happy Birthday!」というテキストを追加するとします。特定のボタンがクリックされるたびに、色付きの領域内に表示されます。

新しい要素をターゲット要素の既存のコンテンツに追加するには、 append() jQuery コマンドを HTML ソースコード内に挿入します。

 $( ".box" ).append( "<p>誕生日おめでとう!</p>" );

このメソッドは、文字列で指定した要素の前後ではなく、要素の末尾に操作を追加します。完全な HTML ドキュメントのコンテキスト内で、操作がどのように行われるかを確認できます。

 <!doctype html>
 <title>例</title>
 <スタイル>
 。箱 {
 背景: オレンジ;
 色: 白;
 色: 白;
 幅: 150px;
 パディング: 20px;
 余白: 10px;
 }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <スクリプト>
 $( 関数() {
 $( "ボタン" ).click( 関数() {
 $(this).after( "<div class='box'>ハッピーバースデー!</div>" );
 });
 });
 </script>
 <button>ボックスを作成</button>

この手法を使用すると、限られたスペース内でインタラクティブ性を作成するための簡単なオプションが得られます。この特定の方法では、操作は新しい個々の要素としてではなく、指定した要素の拡張として表示されることを覚えておいてください。

4. Prepend() メソッド

append()メソッドのバランスとして、 prepend() は、 jQuery コマンドで指定したターゲット要素の最後に要素を追加します。

 $( ".banner" ).prepend( "<p>ハッピーバースデー!</p>" );

この例では、「Happy Birthday!」というテキストが表示されます。コード文字列で示されるバナーの先頭に表示されます。

これらのメソッド ( before() 、 after() 、およびappend()を含む) はすべて、単純な使用に適したアプローチであることに注意してください。ただし、より複雑な挿入には他の手法をお勧めします。

5. Clone() メソッド

次に、 clone()メソッドは、jQuery で DOM を操作するという点で非常に強力なオプションです。前の 4 つの手法では、要素を挿入して移動することができますが、 clone() を使用すると、要素をコピーして元の場所から削除し、別の場所に再挿入または追加することができます。

たとえば、次の行は、元のボックス要素がそのまま残り、その複製が三角形要素に追加されることを意味します。

 $( ".box" ).clone().appendTo( ".triangle" );

この方法の欠点は、要素のid属性が重複する可能性があることです。これらの属性は一意であることを意図しています。 クラス属性を識別子として使用し、クローンメソッドを控えめに使用することで、この問題を回避できます。

6. Wrap() メソッド

最後に、 wrap()メソッドは、要素を既存の文字列にラップする場合に便利です。たとえば、クラスを識別し、どの構造が実装されているかを示すことで、いくつかの段落を新しい HTML 構造にラップできます。

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

この手法では、 wrap()文字列内のターゲットクラスに一致する要素の周りに<div>を作成しています。ただし、複数レベルの深さのラップを作成できますが、最も内側の要素が 1 つだけであることを確認する必要があります。

DOM のトラブルシューティング

DOM の操作に関しては、注意を払う必要がある 1 つの重要な側面を強調したいと思います。ページの読み込みを高速に保ち、不要なコードを避けるために (特にテーマを開発している場合)、DOM ツリーの一部ではない要素を使用しないように注意する必要があります。

要素が DOM の一部であるかどうかわからない場合は、サイトのフロントエンドでブラウザーを使用して各要素を確認できます。ページ上の要素を検査し、それらが DOM ツリーのどこに含まれているかを判断できます。

これは、別のスクリプトがサイトの元の HTML を変更した場合に特に役立ちます。そうしないと、HTML と DOM がまったく同じに見えることがあります。

その他の WP エンジンのリソースとツールを調べる

DOM をサイトの有機的な部分、つまり HTML ソースコードに応答する生きたリソースと考えると、DOM のアクセシビリティの力は驚くべきものです。そのため、DOM とそれを使用してプロジェクトを強化する方法を理解することは、サイトを次のレベルに引き上げるのに役立ちます。

jQuery で DOM を操作すると、WordPress のオープンソースプラットフォームの美しさが際立ちます。ここWP Engineでは、高品質の開発者リソースがどのように違いを生むかを理解しています. だからこそ、一流のホスティングプランとともに、WordPres ユーザーに多くのヘルプを提供しています!