【Alpine.js】DOMを取得する特殊なプロパティ（$el、$refs）

Last updated at 2022-12-12Posted at 2022-12-12

DOM要素取得のためのプロパティ

これは$elを付けた要素自身を取得します。

 <button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>

　↑ この$elはbutton要素自身を取得している。

$el.innnerHTML は「Replace me with "Hello World!"」を指していることになる。
（上記コードではボタンをクリックすることで「Replace me with "Hello World!"」を「Hello World」で上書きをする。）

これはx-refと一緒に使います。

x-ref="hogehoge"　←取得したい要素に付ける

$refs.hogehoge　←これで要素を取り出せる

取得後の扱い方（el,refs共通）
JavaScriptの「getElementById」でDOM要素を取得したのと同じと考えると良いです。

例1）クラス名を扱う場合
$refs.hogehoge.classList = "クラス名クラス名 ..."

例2）要素を取り除くとき
$refs.hogehoge.remove()

例1のコード例

See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.

これが使えればDOMの取得がお茶の子さいさいチョチョイのチョイってワケ。