JavaScript で特定のHTMLタグの子要素（タグ）の数を取得するには childElementCount を使おう！

JavaScriptから特定のHTMLタグの子要素を取得してホゲホゲする用事ができたので、いろいろと調べてみた結果、childElementCount を使うのが良さそうだったのでメモメモです φ（．．）。

たとえば・・・

<select id="select1"> <option>hoge</option> <option>fuga</option> <option>piyo</option> </select>

というようなコードがあった場合、select1 という id を持ったタグが存在するのは分かっているのだけれど、実は状況によって動的に中身が変わるという事があるじゃないですか。でもその中身をなんとかしたい！ というわけです。

この場合、document.getElementById('select1').childElementCount としてやると 3 が返ってくるので、あとは document.getElementById('select1').children[0] とかしてアクセスしてやれば何とかなりそうです。

同じような事をしてくれるメソッドとしては、他に childNodes というものがありまして、こちらは子ノードの入ったオブジェクトを返してくれるので、直にオブジェクトにアクセスできて、より便利そうな気がするのですが・・・

実はこの childNodes 、タグとタグの間のスペースや改行も拾ってきちゃうんですよね。例えば上のHTMLに対して document.getElementById('select1').childNodes.length とすると、7 が帰って来るわけです。

まぁ、childNodes がそういう仕様なので、それ自体には何の問題もないわけですが、子要素のタグだけを相手にしたい場合には、ちょっと困ってしまいます（というか、処理が面倒）。

というわけで、childElementCount を使うのが良さそう。というお話でありました。

た・だ・し、tableタグを扱うときには注意が必要で、以下のようなソースに対して document.getElementById('table1').childElementCount すると 1 が帰ってきます。

<table id="table1"> <tr> <td>1:1</td> <td>2:1</td> <td>3:1</td> </tr> <tr> <td>1:2</td> <td>2:2</td> <td>3:2</td> </tr> <tr> <td>1:3</td> <td>2:3</td> <td>3:3</td> </tr> </table>

なんで？ 3じゃないの？ と思って調べたところ、この記事を書いている時点での仕様では、暗黙の tbody タグがある事になっているからだそうです。

つまり、以下のようなソースであるとして扱われているようなんです。

<table id="table1"> <tbody> <tr> <td>1:1</td> <td>2:1</td> <td>3:1</td> </tr> <tr> <td>1:2</td> <td>2:2</td> <td>3:2</td> </tr> <tr> <td>1:3</td> <td>2:3</td> <td>3:3</td> </tr> </tbody> </table>

なるほどねぇ（なお、thead と tfoot は暗黙には現れないもよう）。

ですので、 document.getElementById('table1').children[0].childElementCount としてやれば、ちゃんと 3 が帰ってきます。

これは気をつけないと。