プリロードされたスクリプトによって動的に作成されたDOM要素にどのようにアクセスおよび操作されるか

この記事では、JavaScriptスクリプトがWeb開発でDOM要素を作成する前にロードおよび実行されたときに効果的にアクセスして操作できる方法について説明します。 3つのコア戦略を紹介します。関数返品値を介して要素参照を直接渡し、カスタムイベントを使用してモジュール間通信を実現し、MutationObserverを使用してDOM構造の変更をリッスンします。これらの方法は、開発者がJavaScriptの実行タイミングと動的なコンテンツの読み込みとの課題を解決し、スクリプトがドラッグ可能になるなどの要素をその後追加することを正しく操作できるようにするのに役立ちます。

問題の理解：JavaScriptの実行タイミングと動的DOM

Webフロントエンドの開発では、一般的なシナリオでは、ページの読み込みが実行されたときに実行されたJavaScriptスクリプトが、ユーザーインタラクションまたは非同期データロードを通じて後でDOMに動的に追加される要素の操作が必要であることです。典型的なジレンマは、スクリプトがdocument.getElementById（）、document.getElementsByClassName（）などのメソッドを介して要素を取得しようとすると、ターゲット要素がDOMにまだ存在していない場合、これらのクエリは空または空のコレクションを返します。

たとえば、次のHTML構造とJavaScriptファイルを考えてみましょう。

 
    
      <button onclick="add_product（）">
        追加
     </button>
     <script type="text/javascript" src="static/script1.js"> </script>
     <script type="text/javascript" src="static/script2.js"> </script>
    

その中で、Script1.jsは、動的に要素を作成する責任があります。

 // static/script1.js
関数add_product（）{
    const add_product_div = document.createelement（ "div"）;
    add_product_div.id = "add_product";
    add_product_div.classname = "draggable_box";
    add_product_div.innerhtml = "<h1> hey </h1> <p> whovevea </p>";
    document.body.appendChild（add_product_div）;
}

script2.jsはこれらの要素にアクセスしようとします。

 // static/script2.js
const divs = document.getElementsByClassName（ "Draggable_box"）;
console.log（divs）; //最初に、空のhtmlcollectionが出力されます

Script2.jsはページが読み込まれたときに実行され、add_product（）関数はボタンがクリックされた後にのみ呼び出されるため、class name draggable_boxを使用してdomにはdomに要素がありません。この問題を解決するには、Script2.jsまたはその他の関連するロジックが作成された後にタイムリーに要素にアクセスして動作できるようにするメカニズムが必要です。

ここにいくつかの効果的なソリューションがあります。

ソリューション1：関数の戻り値は直接渡されます

最も直接的で頻繁に使用される方法は、要素を作成する関数を、新しく作成した要素参照を返すことです。このようにして、関数を呼び出すコードは、新しい要素を直接取得し、その後の操作をすぐに実行できます。

実装方法：

add_product関数を変更して、作成されたdiv要素を返します。

 // static/script1.js（修正）
関数add_product（）{
    const add_product_div = document.createelement（ "div"）;
    add_product_div.id = "add_product";
    add_product_div.classname = "draggable_box";
    add_product_div.innerhtml = "<h1> hey </h1> <p> whovevea </p>";
    document.body.appendChild（add_product_div）;
    add_product_divを返します。 //新しく作成されたDiv要素を返します}

次に、add_productが呼び出され（ボタンのイベントリスナーなど）、この戻り値を取得して操作します。より良い練習のために、通常、インクリックの代わりにAddEventListenerを使用します。

 
    
      
        追加
     
     <script type="text/javascript" src="static/script1.js"> </script>
     <script type="text/javascript" src="static/script2.js"> </script>
    

 // static/script2.js（または他の適切な場所）
//これが製品の追加を処理し、それをドラッグ可能にするための論理関数であると仮定しますbuttonclick（）{
  const newdiv = add_product（）; //関数を呼び出して、新しく作成されたdivを取得します
  console.log（ "newdiv："、newdiv）;
  //ここでは、たとえば、newDivを操作できます。 //要素をドラッグ可能にすることができる関数があるとします}

//必ずイベントリスナーdocument.addeventListener（ 'domcontentloaded'、（）=> {を追加してください。
  const button = document.getElementById（ 'AddProductButton'）;
  if（button）{
    button.addeventlistener（ 'click'、onproductbuttonclick）;
  }
}）;

//仮想的なマケドラグ可能な関数は、関数makedRaggable（element）を実証するために使用されます{
  //実際のドラッグロジックは、ここではelement.style.cursor = 'grab'を説明するためにのみ使用されます。
  console.log（ `element $ {element.id || element.className}は、draggable`）;
}

利点と適用可能なシナリオ：

• シンプルで直感的：コードは明確で、要素の参照が直接渡されます。
• 直接制御：発信者は、新しく作成された要素への直接的な参照を持ち、すぐに動作できます。
• 高い凝集：作成と初期操作（ドラッグの設定など）を密接に組み合わせることができます。
• 適用可能なシナリオ：この方法は、要素を作成するときに最も適用可能であり、それらを動作させるロジックは同じ機能モジュールまたは密接に関連する関数にあります。

ソリューション2：カスタムイベントを使用して通信します

カスタムイベントを使用することは、要素と操作要素を作成するロジックが異なる分離モジュールに配置されている場合、エレガントなソリューションです。要素を作成するモジュールは、新しい要素が追加されたことを他のモジュールに通知するためにイベントを配布できますが、他のモジュールはイベントを聞いて応答できます。

実装方法：

add_product関数では、新しく作成された要素への参照を伝達できるカスタムイベントを作成および配布します。

 // static/script1.js（修正）
関数add_product（）{
  const add_product_div = document.createelement（ "div"）;
  add_product_div.id = "add_product";
  add_product_div.classname = "draggable_box";
  add_product_div.innerhtml = "<h1> hey </h1> <p> whovevea </p>";
  document.body.appendChild（add_product_div）;

  //カスタムイベントの作成と配布
    詳細： {
      要素：add_product_div //新しく作成された要素をイベントデータとして渡す}
  }）;
  document.body.dispatchevent（event）; //ボディに派遣イベント}

次に、このカスタムイベントをscript2.jsまたは応答する必要がある他のスクリプトで聞いてください。

 // static/script2.js（変更）
//「ProductAdded」イベントdocument.body.addeventlistener（ 'productadded'、（e）=> {
  const newdiv = e.detail.element; //イベントの詳細属性console.logから新しいElement Console.logを取得します（ "イベントを通じて新しく作成されたDivを受信しました："、NewDiv）;
  //ここでnewDivを操作します。たとえば、ドラッグ可能にします// makedraggable（newdiv）;
}）;

//必ずイベントリスナーdocument.addeventListener（ 'domcontentloaded'、（）=> {を追加してください。
  const button = document.getElementById（ 'AddProductButton'）;
  if（button）{
    button.addeventlistener（ 'click'、add_product）; //ボタンをクリックして、add_productを直接呼び出します
  }
}）;

//仮想的なマケドラグ可能な関数は、関数makedRaggable（element）を実証するために使用されます{
  element.style.cursor = 'grab';
  console.log（ `element $ {element.id || element.classname}は、ドラッグ可能に設定されています（イベントを通じて）`）;
}

利点と適用可能なシナリオ：

• デカップリング：要素と操作要素の作成のロジックは完全に分離され、独立性があり、コードのモジュール性と保守性が向上します。
• パブリッシュ/サブスクライブモード：パブリッシュ/サブスクライブモードが実装され、複数のリスナーがイベントを応答して、システムの柔軟性を高めます。
• グローバル通知：イベントをDOMツリーの任意のノードで発送およびリッスンすることができ、より広範な通知を実現できます。
• 適用可能なシナリオ：システムが複数の独立したコンポーネントで構成されている場合、イベントを通じて通信する必要がある場合、または複数の無関係なモジュールを通知する必要がある場合、カスタムイベントは非常に適切な選択です。

解決策3：MutationObserverを使用して、DOMの変更を聞きます

MutationObserverは、ノードの追加、除去、プロパティの変更、またはテキストコンテンツの変更など、DOMツリーの変更を聞くことができる強力なAPIです。これは、DOMの動的変化に対する一般的な応答が必要なシナリオに非常に役立ちます。

実装方法：

MutationObserverインスタンスを作成し、Document.bodyの子ノードの変更をリッスンするように構成します。

 // static/script2.js（変更）
function initmatedobserver（）{
  const observer = new MutationObserver（（（MutationList）=> {
    for（mutationlistのconst mutation）{
      //新しいノードが追加されているかどうかを確認します
        for（mutation.addednodesのconstノード）{
          //新しく追加されたノードが私たちが興味を持っているdivであるかどうかを確認します
          if（node.nodetype === node.element_node && node.classlist.contains（ 'draggable_box'））{
            console.log（ "mutationobserver："、nodeを介して新しく作成されたDivを発見します）;
            //新しく発見されたDivを操作します。たとえば、ドラッグアンドドロップ可能にします// makedraggable（node）;
          }
        }
      }
    }
  }）;

  //オブザーバーの構成：ボディエレメントオブザーバーの子ノードの変更を聞いてください。
    ChildList：true //子ノードの追加または削除を観察する// subtree：true //より深いDOMの変更を観察する必要がある場合、このアイテムを追加できます}）;
}

//オブザーバーウィンドウを初期化するようにしてください。AddeventListener（ 'load'、initmateverobserver）; //またはdomcontentLoaded

// static/script1.js（同じ滞在するか、元のバージョンを使用してください）
関数add_product（）{
  const add_product_div = document.createelement（ "div"）;
  add_product_div.id = "add_product";
  add_product_div.classname = "draggable_box";
  add_product_div.innerhtml = "<h1> hey </h1> <p> whovevea </p>";
  document.body.appendChild（add_product_div）;
}

//必ずイベントリスナーdocument.addeventListener（ 'domcontentloaded'、（）=> {を追加してください。
  const button = document.getElementById（ 'AddProductButton'）;
  if（button）{
    button.addeventlistener（ 'click'、add_product）;
  }
}）;

//仮想的なマケドラグ可能な関数は、関数makedRaggable（element）を実証するために使用されます{
  element.style.cursor = 'grab';
  console.log（ `element $ {element.id || element.className}は、（mutationobserver経由で）ドラッグ可能に設定されています。
}

利点と適用可能なシナリオ：

• 普遍性：特定のイベントだけでなく、DOMの変更を聞くことができます。
• 非侵襲的：要素を作成する論理は変更されておらず、MutationObserverは作成プロセスとは無関係に機能します。
• 微調整されたコントロール：観察するタイプの変更と観察するDOMサブツリーを正確に構成できます。
• 適用可能なシナリオ： MutationObserverは、サードパーティライブラリからの広範な、予測不可能な、または動的な変更に応答する必要がある場合、または普遍性を実現するためにDOM監視ツールが必要な場合に最適です。たとえば、ドラッグ可能なフレームワークを実装する場合、MutationObserverは、すべての動的に追加された要素が作成方法に関係なく自動的にドラッグアンドドロップ機能を獲得する必要がある場合に非常に便利です。

要約と選択の提案

JavaScriptスクリプトと動的DOM要素間の相互作用を処理する鍵は、スクリプト実行タイミングの制限を破り、使用可能なときに要素を取得できることを確認することです。

• 関数の戻り値の直接転送：最も単純で最も直接的な、作成と操作のロジックが緊密に結合されているシナリオに適しています。 add_product関数がすぐに操作する必要がある特定の要素を作成することである場合、これが最初の選択です。
• カスタムイベント：異なるモジュールが大規模なアプリケーションで協力する必要があるシナリオに適した分離された通信メカニズムを提供します。このメソッドを選択して、要素を作成する場合は、複数の無関係なリスナーに通知する必要があります。または、作成ロジックを操作ロジックから分離する場合。
• MutationObserver： DOMツリー全体またはその特定の部分の動的な変化を監視し、これらの変更に共通の方法で応答する必要があるシナリオの最も強力で普遍的なソリューション。要素の作成方法を制御できない場合、または特定の基準を満たすすべての動的要素を均一に処理する必要がある場合に役立ちます。

実際の開発では、最も適切な戦略を選択することで、特定のニーズとプロジェクトの複雑さに基づいて、コードの保守性と堅牢性を大幅に改善できます。

以上がプリロードされたスクリプトによって動的に作成されたDOM要素にどのようにアクセスおよび操作されるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。