【JavaScript】HTMLの属性を操作する方法

どうも。みずかず(@mizukazu_1)です。

今回はJavaScriptからHTMLの属性を操作する方法を紹介していきます。

属性というと難しく聞こえますが、idとかclassとかのことです。

jQueryを使うと簡単に操作できますがネイティブのJSでも結構簡単に操作することが出来ます。

まずは要素を取得する

querySelector()を使って、HTMLの要素を取得します。

getElementById()とかgetElemetnsByClassName()などの要素を取得する関数も良く使われていますが、querySelector()を使えばjQuery感覚で要素を取得できるので大変便利です。

const ele = document.querySelector('.test');

こんな感じでCSSのクラス名で要素を取得する事が出来ます。

jQueryっぽいですよね。

取得した要素から属性を操作する

const ele = document.querySelector('.test');

ele.getAttribute(属性名);

getAttribute()を使用することで引数の属性値を取得する事が出来ます。

○○Attribute()という関数がいくつかあるのでそちらも紹介します。

getAttribute()

属性を取得する関数です。

引数に属性名を渡してあげるとその属性値を取得します。

setAttribute()

属性を設定する関数です。

引数には属性名と属性値を渡してあげます。

removeAttribute()

属性値を削除する関数です。

引数に属性名を渡してあげるとその属性を削除します。

hasAttribute()

引数に渡してあげた属性があるかどうか調べる関数です。

属性によって処理を分岐させたいときなどに使えそうですね。

jQueryの場合

一応jQueryバージョンも書いておきます。

jQueryで属性を操作する場合には以下の2つの関数を使います。

attr()

引数に属性名を渡すとその属性値を取得します。

属性名と属性値を渡してあげるとその値を設定してくれます。

removeAttr()

バニラJSとほぼ同じですね。

こちらは属性を削除する関数です。

引数に渡した属性を削除します。

まとめ

バニラJSでもjQueryでも属性の操作に関してはほとんど同じかと思います。

jQueryを使わなくても結構簡単に操作できますよね。

JS自体もどんどん進化しているのでこの先ももっと書きやすくなると思います！