$
$ メソッドは ofa.js のコア関数であり、DOM 要素インスタンスを取得および操作するために使用されます。以下では、$ の主な機能について詳しく説明します:
要素インスタンスの取得
`
メソッドを使用すると、ページ上の CSS セレクタ に一致する最初の要素のインスタンスを取得し、それを操作することができます。以下に例を示します:
target 1 text
上の例では、$ 記号を使用して id が "target1" の要素インスタンスを選択し、text 属性を設定することでそのテキスト内容を変更しました。
子要素検索の例
インスタンスも $ メソッドを持っており、インスタンス上の $ メソッドを通じて、要素インスタンスの最初の条件を満たす子要素インスタンスを取得できます。
target
I am target1
取得した要素インスタンスを直接他の場所に挿入しないでください。このような操作は元の要素に影響を与えます。コピーを作成する必要がある場合は、clone メソッドを使用できます。
position 1
I am target1
position 2
シャドウノード内の子要素を取得する
shadow 属性でインスタンスを取得した後、$ メソッドを使用して目的の要素を取得できます:
$('my-component').shadow.$("selector").method(xxx)
直接インスタンス化要素
以下の方法で、ネイティブ要素を直接 $ インスタンスオブジェクトとして初期化できます:
const ele = document.createElement('div');
const $ele = $(ele);
const ele = document.querySelector('#target');
const $ele = $(ele);
このように、既存のHTML要素を$インスタンスに簡単に変換でき、$が提供する機能を使って操作や処理を行うことができます。
生成要素インスタンス
$ は既存の要素インスタンスを取得するだけでなく、新しい要素インスタンスを作成し、ページに追加するためにも使用できます。
文字列による生成
文字列を使って新しい要素のインスタンスを $ 関数で作成することができます。次のようにします:
target1:
この例では、$ 関数を使用して、指定されたスタイルとテキストコンテンツを持つ新しい要素インスタンスを作成し、それを id が "target1" の既存の要素インスタンス内に追加しました。
オブジェクトによる生成
また、$ 関数を使用してオブジェクト方式で新しい要素インスタンスを生成することもできます。次のように:
target1:
この例では、$ 関数を使用して、タグタイプ、テキスト内容、スタイル属性を含む新しい要素インスタンスをオブジェクトの方法で定義し、それを id が "target1" の既存の要素インスタンス内に追加しました。