JavaScript
PC SAURUS

liタグの数を取得（子要素）getElementsByClassNameとgetElementByIdの違い

HTMLでこのように記述する場面があります

<ul id="list">
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
      <li>eee</li>
    </ul>

ブラウザではリストとしてこのように表示されます→画像
今のリストの数は5個で数えることができます
では、これが例えば都道府県、世界の〇〇などとリスト数が膨大になった時に１から数えるのはすごく手間がかかる作業になります
こんな時にJavaScriptでは便利なプロパティがあります

childElementCountプロパティ

let length = document.getElementById("list").childElementCount;
console.log(length);

コードの流れは、.getElementByIdでid属性のlistを取得
.childElementCountプロパティの使用
変数lengthに代入
変数lengthをconsole.logで出力
→5が出力されてますね！

.childElementCountプロパティはulやliタグ以外にも使用できます

childElementCountプロパティは与えられた要素の子要素の数を取得

getElementsByClassNameとgetElementById

ここからは私が見事にひっかかった箇所を紹介します_φ(･_･
実はコードは最初、このように書いていました

<ul class="list">
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
      <li>eee</li>
    </ul>
...?どこが違うの？
<ul class="list">→<ul id="list">と、属性が違って宣言されてました！

私は"list"を取得しようとしてgetElementsByClassNameプロパティを使用してこのように書きました

let length = document.getElementsByClassName("list").childElementCount;
console.log(length);

ブラウザを起動→エラー^^;
この時...

あれ？classを取得するにはこれだったような(・Д・)？

実はこの使い方はできなかったんですね！

Document インターフェイスの getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。 document オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して getElementsByClassName() を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。

MDN Web Docs

要は...
getElementById⇨オブジェクトを返す
getElementsByClassName()⇨配列風オブジェクトを返す

配列っぽいものに適用されるのでgetElementsByClassName()と、『S』が付いている訳ですね！

ならば、getElementsByClassNameを使う場合はどのようになるのかというと

<div id="test" class="test">hoge</div>
<div class="test">huga</div>
const hello = document.getElementsByClassName('test');
for ( let i = 0; i < test.length; i ++ ){
	console.log(test[i]);
}
// 結果
"<div id='test' class='test'>hoge</div>"
"<div class='test'>huga</div>"

このようにfor文を使って出力しなければいけません(´ｰ｀)
ならば、新たにid属性をつけた方が早いですね...

javascript　チュートリアル

おすすめの記事