Alpine.jsでDOMノードにアクセスする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

エキサイトホールディングス Advent Calendar 2024 シリーズ2の3日目を担当します。

qiita.com

今回は、Alpine.jsのMagicである $elと$refsを使用して、DOMノードにアクセスする方法をご紹介します。

自要素のDOMノードにアクセスする場合

自要素のDOMノードにアクセスする場合は、$elを使用します。

$elはgetElementById()等の代替のようなもので、それ以下は通常のJSと同じくElementプロパティを書くことができます。

例えば、自要素のinnerHTMLを操作する場合は以下のようになります。

See the Pen Alpine.jsの$elで自要素のDOMノードにアクセス by AyumuSaito (@ayumusaito-excite) on CodePen.

<button 
x-data 
type="button" 
@click="$el.innerHTML='クリックされました！'"
>
  クリックしてinnerHTMLを更新
</button>

他要素の

DOMノードにアクセスする場合 他要素のDOMノードにアクセスする場合は、$refsを使用します。

その際、アクセス先の要素にはx-refで識別子を付与しておき、$refs.{識別子}でアクセスします。

See the Pen Alpine.jsの$refsで他要素のDOMノードにアクセス by AyumuSaito (@ayumusaito-excite) on CodePen.

<div x-data>
  <p x-ref="target">アクセス先の要素</p>
  
  <button 
  type="button"  
  @click="$refs.target.innerHTML='クリックされました！'"
  >
    クリックしてアクセス先の要素の文字を変更する
  </button>
</div>

さいごに

今回は、Alpine.jsのMagicである $elと$refsを使用して、DOMノードにアクセスする方法をご紹介しました。

Alpine.jsを使用される方の一助となれば幸いです。

ご精読ありがとうございました。