querySelectorメソッド

querySelectorメソッドは、 CSSの任意のセレクタを使用してページの要素を取得することを可能にします。 取得した要素に対しては、そのテキスト、属性、CSSスタイルなどを変更するなど、 様々な操作を行うことができます。

構文

javascriptdocument.querySelector(セレクタ);

例

段落 #elem を取得し、 textContentを使用してそのテキストを変更してみましょう：

html<p id="elem">テキスト</p>

javascriptlet elem = document.querySelector('#elem');
elem.textContent = '!!!';

コード実行結果：

html<p id="elem">!!!</p>

例

クラス elem を持つ段落を取得し、 そのテキストを変更してみましょう：

html<p class="elem">テキスト</p>

javascriptlet elem = document.querySelector('.elem');
elem.textContent = '!!!';

コード実行結果：

html<p id="elem">!!!</p>

関連項目