[JavaScript]querySelectorで要素を取得する、書き換える

JavaScriptにはquerySelectorという便利なものがありまして、これを使えば要素を取得し、取得したい要素に対して書き換えたりすることも可能になります。

querySelectorで要素を取得する

Document の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

引用：Web API | MDN

少し分かりづらいですが、簡単に言うとJavaScriptでhtmlの要素を取得し書き換えることができます。

セレクターの指定などはclass名やid名で指定できます。

var hogeClass = document.querySelector('.hoge');
var hogeId = document.querySelector('#hoge');

class=’hoge’の要素を変数hogeClassに代入しています。

id=’hoge’の要素を変数idClassに代入しています。

document.querySlector(‘クラスやid名’)で記述します。

要素のスタイルを書き換える

querySelectorを使えば簡単にhtmlの要素を取得することができますが、取得してハイ終わりということはあまりなく特定の要素を取得→書き換えという処理が多いと思います。

例えば、ある処理の中で特定の要素を非表示(display: none)にしたいとします。

document.querySelector('.image-hoge').style.display = 'none';

上記処理は、class=’image-hoge’をdisplay: noneにしています。

document.querySelector('.hoge').style.backgroundColor = '#ffffff';

こちらは特定クラスの背景色を変更しています。(カラーコード適当です)

要素内のテキストを書き換える

スタイル以外にもテキストを書き換えることもできます。サクッと文字列を変えたい時に便利です。

document.querySelector('#hoge').textContent = huga

hoge idのセレクタに変数hugaの値を代入しています。

要素内のhtmlを書き換える

.textContentではテキストを書き換えることができますが、htmlを挿入した場合、それも文字列として認識されてしまいます。

htmlを記述したい場合はinnerHTMLを使います。

document.querySelector('#hoge').innerHTML = '<p>100</p>'