スポンサードリンク

JavaScript で特定のHTMLタグの子要素(タグ)の数を取得するには childElementCount を使おう!

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

たとえば・・・

というようなコードがあった場合、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 が帰ってきます。

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

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

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

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

これは気をつけないと。

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク