JS勉強記⑥getElementsByメソッド

うすときね

タグ名をキーに要素を取得

指定したHTMLタグ名をキーに要素を取得する。基本構文は以下の通り。

document.getElementsByTagName('タグ名');

※指定したタグ名が存在しない場合は空のHTMLCollection([])を返す。nullではない！
※HTMLCollectionとは配列に似たデータのこと。詳しくは後述。

例題

複数の要素とボタンを配置。タグ名がdivの要素を取得し、その内容をコンソールに出力する。HTMLのbodyは下記の通り。

 <body>
   <div>りんご(div)</div>
   <p>もも</p>
   <div>いちご(div)</div>
   <span>なし</span>
   <div>ぶどう</div>
   <input type="button" value="取得" onclick="showElements()">
   <script src="js/elements_tag_name.js"></script>
 </body>

inputのonclickプロパティでクリック時にshowElements関数を実行する様あらかじめ設定。

jsは下記の通り。

function showElements() {

 const elements = document.getElementsByTagName('div');
 for (let i = 0; i < elements.length; i++) {
   console.log(elements[i].innerText);
 }
}

①function命令でshowElements関数を定義。
②変数elementsを宣言し、getElementsByTagNameメソッドで要素を呼び出すタグを'div'に指定。（＝elementsにdivが配列として含まれる）
③変数elementsを取り出す繰り返し処理を設定。変数iを宣言し（繰り返し処理なのでconstではなくletで宣言）、その初期条件は0、繰り返す条件はiが変数elementsの配列に格納されている個数より小さい間（＝divの個数の最大数より小さい間）、その条件が成立する間は変数iにインクリメントする。
④elements変数のコンソールへの出力を設定。実際に取り出したいのはdivのテキストなので.innerTextプロパティを記載する。
⑤HTMLでのdivタグのテキストが「りんご」「いちご」「ぶどう」なので、これらのテキストがコンソールに出力されていればOK。

MEMO：配列が入ってくるのでわかりにくいが、配列をコンソールに出力するためにはindex（配列の順番）は0からスタートし1,2,…とカウントしなければいけない。今回divは3つあるので、indexはelements[0],[1],[2]で打ち止め。そのためfor分の条件は「i < elements.length;」（elementsの配列に含まれるdivの実際の個数より小さい）となる。勉強記③の演習と同じ感じ！

name属性をキーに要素を取得

指定したname属性をキーに要素を取得する。基本構文は以下の通り。

document.getElementsByName('name属性の値');

※指定したタグ名が存在しない場合は空のHTMLCollection([])を返す。nullではない！

例題

テキストボックスとボタンを配置。テキストボックスに任意の文字列を入力しボタンを押すと、任意の文字列がコンソールに出力される。HTMLのbodyは下記の通り。

<body>
   <input type="text" name="result">
   <input type="button" value="取得" onclick="showElements()">
   <script src="js/elements_name.js"></script>
 </body>

先ほどと同様にボタンを押したときの動作としてshowElements関数をあらかじめ設定。

jsは以下の通り。

 function showElements() {
 const elements = document.getElementsByName('result');
 console.log(elements[0].value);
}

①function命令でshowElements関数を定義。
②変数elementsを宣言し、getElementsByNameメソッドで要素を呼び出すname属性を'result'に指定。
③変数elementsのコンソールへの出力を設定。.valueプロパティでテキストボックスに入力された文字列を取り出す。
⑤テキストボックスに入力した文字列がコンソールに出力されていればOK。

class属性をキーに要素を取得

指定したclass属性をキーに要素を取得する。基本構文は以下の通り。

document.getElementsByClassName('class属性の値');

※指定したタグ名が存在しない場合は空のHTMLCollection([])を返す。nullではない！

例題

リスト（複数）とボタンを設置。ボタンをクリックしたらclass名が'foo'の要素を取得し、その内容をコンソールに出力する。HTMLのbodyは下記の通り。

 <body>
   <ul>
     <li class="foo">ネコ</li>
     <li class="bar">イヌ</li>
     <li class="foo">たぬき</li>
     <li>きつね</li>
     <li class=bar"">ねずみ</li>
   </ul>
   <input type="button" value="取得" onclick="showElements()">
   <script src="../js_dom/js/elements_class.js" charset="utf-8"></script>
 </body>

先ほどと同様にボタンを押したときの動作としてshowElements関数をあらかじめ設定。

jsは以下の通り。

 function showElements() {
 const elements = document.getElementsByClassName('foo');
 for (let i = 0; i < elements.length; i++){
   console.log(elements[i].innerText);
 }
}

①function命令でshowElements関数を定義。
②変数elementsを宣言し、getElementsByClassNameメソッドで要素を呼び出すclass名を'foo'に指定。（＝elementsにclass名が'foo'の要素が配列として含まれる）
③変数elementsを取り出す繰り返し処理を設定。変数iを宣言し（繰り返し処理なのでconstではなくletで宣言）、その初期条件は0、繰り返す条件はiが変数elementsの配列に格納されている個数より小さい間（＝class名が'foo'の要素の個数の最大数より小さい間）、その条件が成立する間は変数iにインクリメントする。
④elements変数のコンソールへの出力を設定。実際に取り出したいのはclass名が'foo'の要素のテキストなので.innerTextプロパティを記載する。
⑤HTMLでのclass名が'foo'である要素のテキストが「ネコ」「たぬき」なので、これらのテキストがコンソールに出力されていればOK。

呼び出しキー（Id/TagName/Name/ClassName）の使い分け

id属性：１つのHTMLの中で１つしか使えないユニーク属性なのでid属性を設定した要素のみ呼び出したい場合に使用。構文も唯一getElement（単数形）表記。

タグ名・class属性：呼び出したいキーによって使い分ける。要素でくくって呼び出したいときはTagName、複数タグにまたがって呼び出したいときはClassNameでそれぞれ記述する。構文はgetElements（複数形）表記。

name属性：本来は複数あるものかもしれないので構文はgetElements（複数形）表記。今回はname属性を持っているのは１つ目のinput要素だけなのでfor分は不要だったが、コンソールに出力する際は配列とおなじ記述（elements[0]）をする。

class属性とname属性の使い分けがよくわからんが、name属性は現在のブラウザでは限定的な要素（form,input）等にしか使用されていないようなので、基本的にはId/TagName/ClassNameでキーは事足りると思われる。
【参考リンク】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName
https://t32k.me/mol/log/getelementsbyname-and-getelementsbyclassname/

いいなと思ったら応援しよう！