JavaScriptにおけるDOM要素の取得
これから、ページのDOM要素を取得する方法を学びます。 これは、後でそれらを操作するために必要です。
例えば、次のようなボタンがあるとします:
<input id="button" type="submit">
このボタンへの参照を変数に取得しましょう。
そのためには、特別なオブジェクト document の
メソッド querySelector を使用します。
このメソッドはパラメータとしてCSSセレクタを受け取り、
そのセレクタに一致する要素への参照を返します。
私たちのボタンには、値 button を持つ
属性 id があります。
つまり、セレクター #button で
このボタンを見つけることができます。
では、ボタンを見つけて、その参照を変数に代入しましょう:
let button = document.querySelector('#button');
console.log(button);
3 つの段落があります:
<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>
各段落への参照をそれぞれ別の変数に代入し、 各変数の内容をコンソールに出力してください。