【JavaScript】要素の中身が空かどうか判定する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで指定した要素の中身が空かどうかを判定する方法をご紹介しています。

JavaScriptで要素の中身が空かどうかで処理を分けたいけどどうするんだろう？

とお悩みの方に向けた記事になっています。本記事を参考に実装していただければ幸いです。

では、解説していきます。

共通のHTML

本記事では、要素の中身が空かどうか判定する方法を2パターンご紹介しています。スクリプトは異なりますが、HTMLは同じものを使用しています。

下記は本記事で使用しているHTMLになります。

<div id="app">
    <h1>Lorem Ipsum</h1>
    <div id="el"></div>
</div>

2パターンどちらの方法も処理内容としては同じもので「id」に「el」を持っている要素を取得して、要素の中身が空かどうかを判定する、といった流れになります。

箇条書きで表すと下記のような順番です。

• 「el」の要素を取得する
• 「el」が持っているノードもしくは要素の数を取得する
• 取得したノードもしくは要素の数で空かどうかを判定する

分岐後の処理は各々実現したい内容が異なるかと思いますので、皆さんに実装していただくとして。要素の中身が空かどうかを判定する部分まで早速作っていきましょう。

要素が空かどうかを判定する

要素が持っているノードや要素の取得するために、下記のプロパティを使用します。

• childNodes
• children

childNodes

「childNodes」は指定された要素の子ノードを「NodeList」で返すプロパティです。取得した子ノードの数を取得して中身が空かどうかを判定します。

let el = document.getElementById('el');

if(el.childNodes.length === 0){
    //空の場合の処理
    el.parentNode.removeChild(el);
}

使用にあたって下記の点にご注意ください。

• 予め空を確認する要素を取得する必要がある
• 「Node」の長さ（数）で判定しているため、テキストノードを持っている場合は空判定にならない

※より詳しい使い方については下記のリンク先をご参照ください。

Node.childNodes｜MDN

children

「children」は指定したノードが持つ要素（Element）を返すプロパティです。ノードが持っている要素の数を取得して中身が空かどうかを判定します。

<div id="app">
    <h1>Lorem Ipsum</h1>
    <div id="el"></div>
</div>

    let el = document.getElementById('el');

    if(el.children.length === 0){
        el.parentNode.removeChild(el);
    }

使用にあたって下記の点にご注意ください。

• 予め空を確認する要素を取得する必要がある
• HTMLCollectionのため使用するにあたって注意が必要
• 「Element」の長さ（数）で判定しているため、テキストノードを持っていても空の判定になる

※より詳しい使い方については下記のリンク先をご参照ください。

ParentNode.children｜MDN

上記2つのオプションの使い分けをまとめると下記のようになります。

childNodes	「子ノード」の数で要素の中身が空かどうか判定する場合は「childNodes」を使用する。
children	「子要素」の数で要素の中身が空かどうか判定する場合は「children」を使用する。

それぞれ用途が異なりますので、処理内容で判断して使い分けていただければと思います。

最後に

いかがでしたでしょうか。

「JavaScript」で要素の中身が空かどうか判定する、というのは高い頻度で使用する処理ですが、デフォルトのプロパティで用意されていないため、長さ（数）を取得して判定する方法が採用されます。要素の中身が空かどうか判定する際に使用していただければ幸いです！

以上、JavaScriptで要素が空かどうか判定する方法のご紹介でした！