【JS】要素を取得する３つの方法
Javascriptを使っていると、要素を取得する方法でいつも迷う
要素を取る方法は主に３つかな
- getElementsByClassName
- getElementById
- querySelector
サンプルHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>javascript</title>
<script src="js/script.js" defer></script>
</head>
<body>
<h1>要素を取ってくる方法</h1>
<p class="turekusa" id="tsuredure">つれづれなるままに</p>
<p id="higurashi">日暮らし硯に向かひて</p>
<p class="turekusa" id="yoshida">心にうつりゆくよしなしごとを</p>
<p class="sokoha" id="yoshida">そこはかとなく書きつくれば</p>
<p>あやしうこそものぐるほしけれ</p>
</body>
</html>body内だけ注目していただければ大丈夫です。
getElementsByClassName
クラス名を元に要素を取ってくる方法
htmlには同じクラス名を持つ要素が複数あるのでElement"s"であることに注目。
const eleByClassTurekusa = document.getElementsByClassName('turekusa');
const eleByClassSokoha = document.getElementsByClassName('sokoha');
/* turekusaというクラス名を持つ要素が２つある場合 */
console.log(eleByClassTurekusa);
/* sokohaというクラス名を持つ要素が１つある場合*/
console.log(eleByClassSokoha);実行結果
HTMLCollection(2)
HTMLCollectionいきなり想像とは異なる結果に。
クラス名で要素を取ってくる場合、複数の要素があることが前提なので配列に要素が入っているようなイメージです。
1行目は要素が２つあるので（２）、2行目は要素が１つなので末尾にはなにもついていません。
よって、要素を確認したい場合は配列の形で表記します。
console.log(eleByClassTurekusa[0]);
console.log(eleByClassTurekusa[1]);getElementById
id名を元に要素を取ってくる方法
html内にはidは基本一つであるため、複数ある場合は考えないで良いけれど試しに取得してみています。
const eleById = document.getElementById('higurashi');
const eleByIdYoshida = document.getElementById('yoshida');
/* higurashiというIDを持つ要素が１つある場合 */
console.log(eleById);
/* yoshidaというIDを持つ要素が２つある場合（文法上ダメ） */
console.log(eleByIdYoshida);実行結果
<p id="higurashi">日暮らし硯に向かひて</p>
<p class="turekusa" id="yoshida">心にうつりゆくよしなしごとを</p>こちらは分かりやすい実行結果です。
higurashiというidを持つ要素が取得されています。
試しにyoshidaというid名を持つ要素を２つ作って取得してみたところ、先に書いてある要素が持ってこられていますね。これの実行結果は分析しても意味がない！？
querySelector
クラス名でもid名でも取得できるので素敵。
ただ、同じクラス名を持つ要素が複数あると先に書いてある要素しか持ってきてくれないので注意が必要。
よって、クラス名から取得する場合はgetElementsByClassNameが良さそう。
また、上記2個とは違いパラメータがクラス名なのかidなのかを明確にする必要があるので、クラス名なら「.」、idなら「＃」を付ける必要があります。
const eleQueryClassTurekusa = document.querySelector('.turekusa');
const eleQueryClassSokoha = document.querySelector('.sokoha');
const eleQueryId = document.querySelector('#higurashi');
/* turekusaというクラス名を持つ要素が２つある場合 */
console.log(eleQueryClassTurekusa);
/* sokohaというクラス名を持つ要素が１つある場合*/
console.log(eleQueryClassSokoha);
/* higurashiというIDを持つ要素が１つある場合 */
console.log(eleQueryId);実行結果
<p class="turekusa" id="tsuredure">つれづれなるままに</p>
<p class="sokoha" id="yoshida">そこはかとなく書きつくれば</p>
<p id="higurashi">日暮らし硯に向かひて</p>万能であるけれど、使い方に注意が必要なquerySelector。
サンプルJS（script.js）
const eleByClassTurekusa = document.getElementsByClassName('turekusa');
const eleByClassSokoha = document.getElementsByClassName('sokoha');
const eleById = document.getElementById('higurashi');
const eleByIdYoshida = document.getElementById('yoshida');
const eleQueryClassTurekusa = document.querySelector('.turekusa');
const eleQueryClassSokoha = document.querySelector('.sokoha');
const eleQueryId = document.querySelector('#higurashi');
/* turekusaというクラス名を持つ要素が２つある場合 */
console.log(eleByClassTurekusa);
/* sokohaというクラス名を持つ要素が１つある場合*/
console.log(eleByClassSokoha);
console.log(eleByClassTurekusa[0]);
console.log(eleByClassTurekusa[1]);
/* higurashiというIDを持つ要素が１つある場合 */
console.log(eleById);
/* yoshidaというIDを持つ要素が２つある場合（文法上ダメ） */
console.log(eleByIdYoshida);
/* turekusaというクラス名を持つ要素が２つある場合 */
console.log(eleQueryClassTurekusa);
/* sokohaというクラス名を持つ要素が１つある場合*/
console.log(eleQueryClassSokoha);
/* higurashiというIDを持つ要素が１つある場合 */
console.log(eleQueryId);冒頭のサンプルHTMLと合わせて実行して、実行結果を良く分析してみると面白いです。
ブログランキングに参加しています。
