JavaScriptでセレクターに一致する最初の要素を取得する場合は、 querySelector()メソッドを使います。
最初の要素だけでなく、すべての要素を取得したい場合は、 querySelectorAll()メソッドを使います。
querySelector()の戻り値はElementオブジェクトで、 該当要素がない場合は、nullを返します。
querySelector()の構文
document.querySelector(セレクター);
セレクター = CSSで使われている記法
サンプルコード
HTML
次のように、p要素を3つ用意します。
<p class="cls1">コンテンツ1</p>
<p class="cls2">コンテンツ2</p>
<p class="cls3">コンテンツ3</p>
JavaScript
セレクターに「p要素」を指定します。
var elem = document.querySelector('p');
console.log(elem); // <p class="cls1">コンテンツ1</p>
console.log(elem.textContent); // コンテンツ1
表示結果からわかるように、 取得できるのはセレクターに一致する最初の要素のみで、 Elementオブジェクト（単一要素）です。
セレクターに一致する要素がない場合
上のHTMLを利用して、存在しないdiv要素を指定してみます。
var elem = document.querySelector('div');
console.log(elem); // null
該当要素がない場合は、nullを返します。