1.要素の取得
1.querySelector
document.querySelector('セレクター名');“document”というのはHTMLやCSSを取得するための命令のようなもので、”querySelector”というのは「指定したセレクターで探してね」というものだと以前学習しました。
こばゆた
この場合は以下のようなイメージです
<p id="greet">Hello!</p>document. querySelector('p'); //documentの中からp要素を取得する
console.log(document.querySelector('p')); //p要素を出力する出力結果
出力すると指定した要素やid名などが表示されています。
2.querySelectorAll
要素が複数ある場合は”querySelectorAll( )[ ]”を使って指定します。
document.querySelectorAll('セレクター名')[インデックス番号];インデックス番号で取得するので配列と同じで０から始まることに注意です。
<p>テキスト1</p> <!--インデックス番号0-->
<div>テキスト2</div>
<p>テキスト3</p> <!--インデックス番号1-->
<div>テキスト4</div>
<p>テキスト5</p> <!--インデックス番号2-->document. querySelectorAll('p')[1];
console.log(document.querySelectorAll('p')[1]);出力結果
p要素のインデックス番号1である「テキスト3」が取得されました。
ちなみに今回のように要素が複数ある場合に”querySelector”で取得すると先頭の「テキスト１」が取得されます。
document.querySelector('p');
console.log(document.querySelector('p'));出力結果
3.getElementById
こちらはid名で指定して取得する場合です。
document.getElementById('id名');<p id="greet">Hello!</p>document.getElementById('greet'); //id名'greet'を取得する
console.log(document.getElementById('greet')); //id名'greet'を出力する出力結果
こばゆた
他にも”getElementsByClassName( )”や”getElementsByTagName( )”やNodeを使った取得方法もありますが最初はこれで十分だと思います
2.まとめ
要素の取得 まとめ
要素を取得するには
- セレクター
- 複数のセレクター
- id属性
で変わる
document.querySelector('セレクター名'); //セレクターで取得
document. querySelectorAll('セレクター名')[インデックス番号]; //複数のセレクターの中から指定したインデックス番号の要素を取得
document.getElementById('id名'); //id名で取得
コメント