JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素が別の要素内に含まれているか判定する方法

HTMLの構造では、ある要素（element）の中に別の要素が入れ子になっていることがよくあります。たとえば、div要素の中にspan要素が含まれているケースなどです。

JavaScriptでは、.contains()メソッドを使うことで、あるノードが別のノードを含んでいるかどうかを簡単に判定できます。このメソッドは、条件が満たされればtrueを、満たされなければfalseを返します。

構文

node.contains(node);

使用例

次の例では、span要素がdiv要素の中に配置されています。そのため、コードを実行すると.contains()メソッドはtrueを返し、その結果が出力画面に表示されます。

<html>
<body>
<div id="div">
<p>私の中には <span id="span"><b>span</b></span> 要素が含まれています。</p>
</div>
<p id = "contain"></p>
<script>
   var span = document.getElementById("span");
   var div = document.getElementById("div").contains(span);
   document.getElementById("contain").innerHTML = div;
</script>
</body>
</html>

出力結果

私の中には span 要素が含まれています。

true

このように.contains()メソッドを活用すれば、DOM上である要素が別の要素の子孫にあたるかどうかを手軽にチェックでき、クリックイベントの対象判別や条件分岐など、さまざまな場面で役立ちます。

  1. JavaScriptで親要素にアクセスする方法【parentNodeプロパティの使い方】

    JavaScriptでDOM操作を行っていると、ある要素の親要素にアクセスしたい場面によく出会います。そんなときに活躍するのがparentNodeプロパティです。このプロパティは、対象ノードの直接の親ノードを返します。 本記事では、クリックイベントとparentNodeプロパティを組み合わせて、クリックされた子要素の親要素を取得し、そのクラス名を画面に表示するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&qu

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in