HOMEJavaScript【JavaScript】要素の中身が空かどうか判定する【JavaScript】要素の中身が空かどうか判定する2020.02.08JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptで指定した要素の中身が空かどうかを判定する方法をご紹介しています。JavaScriptで要素の中身が空かどうかで処理を分けたいけどどうするんだろう?とお悩みの方に向けた記事になっています。本記事を参考に実装していただければ幸いです。共通のHTML本記事では、要素の中身が空かどうか判定する方法を2パターンご紹介しています。スクリプトは異なりますが、HTMLは同じものを使用しています。下記は本記事で使用しているHTMLになります。id="el"></div></div>2パターンどちらの方法も処理内容としては同じもので「id」に「el」を持っている要素を取得して、要素の中身が空かどうかを判定する、といった流れになります。箇条書きで表すと下記のような順番です。「el」の要素を取得する「el」が持っているノードもしくは要素の数を取得する取得したノードもしくは要素の数で空かどうかを判定する分岐後の処理は各々実現したい内容が異なるかと思いますので、皆さんに実装していただくとして。要素の中身が空かどうかを判定する部分まで早速作っていきましょう。要素が空かどうかを判定する要素が持っているノードや要素の取得するために、下記のプロパティを使用します。childNodeschildrenchildNodes「childNodes」は指定された要素の子ノードを「NodeList」で返すプロパティです。取得した子ノードの数を取得して中身が空かどうかを判定します。el.parentNode.removeChild(el);}使用にあたって下記の点にご注意ください。空を確認する要素を取得する必要がある「Node」の長さ(数)で判定しているため、テキストノードを持っている場合は空判定にならない※より詳しい使い方については下記のリンク先をご参照ください。Node.childNodes|MDNchildren「children」は指定したノードが持つ要素(Element)を返すプロパティです。ノードが持っている要素の数を取得して中身が空かどうかを判定します。}使用にあたって下記の点にご注意ください。「Element」の長さ(数)で判定しているため、テキストノードを持っていても空の判定になる※より詳しい使い方については下記のリンク先をご参照ください。ParentNode.children|MDN上記2つのオプションの使い分けをまとめると下記のようになります。childNodes「子ノード」の数で要素の中身が空かどうか判定する場合は「childNodes」を使用する。children「子要素」の数で要素の中身が空かどうか判定する場合は「children」を使用する。それぞれ用途が異なりますので、処理内容で判断して使い分けていただければと思います。最後にいかがでしたでしょうか。「JavaScript」で要素の中身が空かどうか判定する、というのは高い頻度で使用する処理ですが、デフォルトのプロパティで用意されていないため、長さ(数)を取得して判定する方法が採用されます。要素の中身が空かどうか判定する際に使用していただければ幸いです!以上、JavaScriptで要素が空かどうか判定する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。