DOM の変更

Lightning コンポーネントフレームワークによって管理される DOM 要素

フレームワークは、コンポーネントによって所有される DOM 要素の作成と管理を行います。フレームワークによって作成される DOM 要素を変更する場合は、コンポーネントのレンダラで DOM 要素を変更します。このようにしないと、フレームワークはコンポーネントの表示時に変更を無効にします。

たとえば、クライアント側コントローラから DOM 要素を直接変更すると、コンポーネントの表示時にその変更が上書きされる可能性があります。その代わりにコンポーネントの属性を更新し、フレームワークの表示サービスが DOM の更新に対処できるようにしてください。

一般的にはカスタムレンダラを作成する必要はありませんが、フレームワークの表示サービスが DOM 要素を挿入した後で、DOM ツリーを操作する必要がある場合は、カスタムレンダラを作成すると便利です。表示動作をカスタマイズする必要があるが、マークアップでカスタマイズしたり、init イベントを使用してカスタマイズしたりできない場合は、クライアント側のレンダラを作成します。

レンダラでは、現在のコンポーネントのみに属す DOM を変更します。親コンポーネントからアクセスする場合でも、別のコンポーネントにアクセスしてその DOM 要素を変更すると、コンポーネントのカプセル化が壊れるため、このような行為は避けてください。

カスタムレンダラの作成には、多くの場合、より良い方法があります。DOM 要素を直接設定する代わりに、マークアップで式を使用することを検討してください。

レンダラ外のコンポーネントの CSS クラスを変更するには、$A.util.addClass()、$A.util.removeClass()、$A.util.toggleClass() のメソッドを使用できます。

レンダラの外部で DOM を読み取ることはできます。

外部ライブラリによって管理される DOM 要素

Charting ライブラリなど、さまざまなライブラリを使用して、DOM 要素の作成と管理を行うことができます。これらの DOM 要素をレンダラ内で変更する必要はありません。レンダラは、Lightning コンポーネントフレームワークによって作成と管理が行われる DOM 要素のカスタマイズにのみ使用します。

外部ライブラリを使用するには、<ltng:require> を使用します。このタグにより、選択したライブラリの読み込みが、Lightning コンポーネントフレームワークの表示サイクルと調整されて、すべてが調和します。