JavaScriptにおけるDOM要素の取得

これから、ページのDOM要素を取得する方法を学びます。 これは、後でそれらを操作するために必要です。

例えば、次のようなボタンがあるとします：

html<input id="button" type="submit">

このボタンへの参照を変数に取得しましょう。 そのためには、特別なオブジェクト document の メソッド querySelector を使用します。 このメソッドはパラメータとしてCSSセレクタを受け取り、 そのセレクタに一致する要素への参照を返します。

私たちのボタンには、値 button を持つ 属性 id があります。 つまり、セレクター #button で このボタンを見つけることができます。 では、ボタンを見つけて、その参照を変数に代入しましょう：

javascriptlet button = document.querySelector('#button');
console.log(button);

html<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>