タグの数 ( list ) を調べる方法!Javascriptの勉強

2021-05-24

listタグの数がいくつあるのか知りたいなと思ったので、listタグの数を調べる方法を調べてみました。listタグでなくても調べられます。

やりたいこと

下記のようなhtmlがあったとしてlistタグの数をJavascriptで取得する方法を調べます。

<ul id="id1" class="class1">
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
</ul>

jQueryで取得する

jQueryでlistタグの数を取得してみます。

サンプルコード

codepenで作成してみました。

See the Pen how to get li length in jQuery by Nakamoto (@programmerlife) on CodePen.

jQueryでlistタグの数を取得するにはlengthを使用します。
上記例では以下の文を使用し取得しています。

let count = $("#id1 li").length;

クラスで取得する場合はセレクタ "#id1 li" を ".class1 li" にしてあげれば取得可能です。ただこの場合はidで取得するのが一般的なようです。

jQueryだと簡単に取得できます。

Javascriptで取得する

jQueryを使用せずにlistタグの数を取得してみます。

サンプルコード

codepenで作成してみました。

See the Pen how to get li length in vanilla JS by Nakamoto (@programmerlife) on CodePen.

JavascriptではchildElementCountを使用してlistの数を取得しています。
上記例では以下の文を使用し取得しています。

const elm = document.getElementById("id2");
const childCount = elm.childElementCount;

クラスで取得したい場合はdocument.getElementsByClassName("class2");のようになります。

querySelectorAllを使っても長さは取れました。

document.querySelectorAll("ul li").length;

querySelectorAll本当に便利。ただせっかく用意されているのでchildElementCountを使うのが良さそうです。

おわり

jQueryだとlistの数もlengthとして取得できるんですね。

余談ですがjQueryは将来的に勉強しなくてもいいかなと思っていたのですが、まだWebサイトの70%はjQueryを使っているから覚えて損はないという記事をみかけたので、jQueryも少しずつ取り入れていこうかなと思っています。

参考

https://www.w3schools.com/jsref/prop_element_childelementcount.asp

Javascript

Posted by Nakamoto