DOM要素の取得

時には、基盤となるDOM要素にアクセスし、ブラウザのAPIを直接使用する必要があります。

ビジュアルNoodlノードからDOM要素にアクセスするために、ビジュアルノードをスクリプトノードに接続します。入力タイプは "reference"（または "*" ですべてのタイプを受け入れる）であるべきです。この例ではGroupを使用していますが、どのビジュアルノードでも機能します。

Script.Inputs = {
    group: 'reference',
}

Noodlノードへの参照があれば、Noodlノード上の getDOMElement() を使ってDOM要素の参照を取得できます。

ビジュアルノードがアンマウントされているか、レンダリングの機会がまだない場合があります。DOM要素があることを確認するために、NoodlノードからのDid Mount出力を使用します。これにより、最新のDOM参照を取得し、ビジュアルノードが実際にレンダリングされるまでコードが実行されないことが保証されます。

Script.Inputs = {
    group: 'reference',
}

Script.Signals = {
    didMount() {
        const domElement = Script.Inputs.group.getDOMElement()
        //domElement.addEventListener(...)
    },
    willUnmount() {
        // const domElement = Script.Inputs.group.getDOMElement();
        // domElement.removeEventListener(...)
    },
}