HTML要素が子要素を持つか確認する

特定のHTML要素が子要素を持つか確認する方法について解説します。

この記事のポイント

子要素の対象をHTML要素のみに限定して判定する場合はchildElementCountプロパティを使う
テキストを子要素として含めて空要素か判定する場合はhasChildNodesメソッドを使う

子要素があるか確認する

特定のHTML要素が子要素を持つか確認したいときは、hasChildNodesメソッドを使うか、childElementCountプロパティを参照します。

hasChildNodesメソッドは子要素があるとtrueを返し、ない場合はfalseを返します。
このメソッドはテキストノード（要素内のテキスト）も1つの子要素として判断するため、h1要素やp要素でもテキストが入っていれば、子要素があると判定してtrueを返します。

もう1つのchildElementCountプロパティは子要素の数を数値で返します。
もし子要素がない場合は0になります。
また、こちらのプロパティはテキストノードは子要素にカウントせず、あくまでHTML要素のみを対象にします。

以下のHTMLコードがあることを前提に、ul要素とp要素に対してそれぞれ子要素があるか確認を行っていきます。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
	<ul id="list1">
		<li>テキスト<strong>1</strong></li>
		<li>テキスト<strong>2</strong></li>
		<li>テキスト<strong>3</strong></li>
		<li>テキスト<strong>4</strong></li>
		<li>テキスト<strong>5</strong></li>
	</ul>
	<p id="p1">I like cat.</p>
</body>

以下のコードで上記のHTMLに対してhasChildNodesメソッドとchildElementCountプロパティを使って子要素があるか確認します。

JS コード例

let list_element = document.getElementById("list1");
console.log(list_element.hasChildNodes()); // true
console.log(list_element.childElementCount); // 5

let p_element = document.getElementById("p1");
console.log(p_element.hasChildNodes()); // true
console.log(p_element.childElementCount); // 0

ul要素は子要素として5つのli要素があるため、いずれの方法でも子要素があると判断できます。

一方、p要素については他のHTML要素を含まないため、子要素がないと判定したいところです。
しかしテキストノードがあるため、hasChildNodesメソッドはtrueを返します。
もしp要素にテキストが入っていない「<p id="p1"></p>」のような状態であれば、hasChildNodesメソッドはfalseを返します。

もう１つのchildElementCountプロパティは0を返してくれます。

以上の結果から、子要素をもつ基準を「HTML要素のみ」にして判定する場合はchildElementCountプロパティを使い、テキストも子要素として含めて空要素であるかを判定する場合はhasChildNodesメソッドを使うようにすることをオススメします。

子要素があるか確認する

HTML コード例

JS コード例

関連記事