HTML DOMのhasChildNodes()メソッドとは？子ノードの有無をチェックする方法
HTML DOMのhasChildNodes()メソッドは、指定した要素が子ノードを持っているかどうかを判定するために使用されるメソッドです。要素に子ノードが存在する場合は「true」を返し、存在しない場合は「false」を返します。
なお、ノード内の空白（ホワイトスペース）はテキストノードとして扱われるため、子ノードとしてカウントされる点に注意が必要です。
構文
hasChildNodes()メソッドの構文は以下のとおりです。
node.hasChildNodes()
使用例
hasChildNodes()メソッドの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<script>
function checkChild() {
var div = document.getElementById("DIV1").hasChildNodes();
document.getElementById("Sample").innerHTML = div;
}
</script>
</head>
<body>
<h1> hasChildNodes() method example</h1>
<div id="DIV1">
<p>This is a p element inside the div element</p>
<span>This is a span element inside the div element</span>
</div>
<br>
<button onclick="checkChild()">CHECK</button>
<p id="Sample"></p>
</body>
</html>
出力結果
上記のコードを実行すると、次のような画面が表示されます。
CHECKボタンをクリックすると、以下のように判定結果が表示されます。
コードの解説
この例では、まずid「DIV1」を持つ<div>要素を作成し、その内部に<p>要素と<span>要素を配置しています。
<div id="DIV1"> <p>This is a p element inside the div element</p> <span>This is a span element inside the div element</span> </div>
次に、ユーザーがクリックするとcheckChild()関数を実行するCHECKボタンを作成しています。
<button onclick="checkChild()">CHECK</button>
checkChild()関数では、getElementById()メソッドを使って対象の<div>要素を取得し、その要素に対してhasChildNodes()メソッドを呼び出しています。div要素の中には2つの子要素が存在するため、戻り値は「true」となります。この結果は、innerHTMLプロパティを使用して、id「Sample」が設定された段落に表示されます。
function checkChild() {
var div = document.getElementById("DIV1").hasChildNodes();
document.getElementById("Sample").innerHTML = div;
}
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや
-
HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説
HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object