JavaScriptで要素が含まれているか判定｜contains() メソッドの使い方

JavaScriptで要素が含まれているか判定｜contains() メソッドの使い方

JavaScriptで要素が別の要素に含まれているかを判定したいけれど、どのメソッドを使えばいいか迷っていませんか？
この記事では、contains() メソッドを使って、親要素・子要素・孫要素の関係を簡単にチェックする方法を詳しく解説します。

containsメソッドを使うと「要素1」が「要素2」を含んでいるかかどうか（要素2が子孫要素か）調べることができます。
親要1.contains(親要1に含まれているか調べたい要素2)
含んでいる（子孫要素である）場合はtrueが返ってきます。そうでない場合はfalseが返ってきます。
「要素1」と「要素2」に同一要素を指定した場合もtrueが返ってくるので注意。

例

ソースコード

<div id="parent1" style="border:2px #999 solid;padding:8px;margin:4px;">
    ここは id="parent1" のdiv要素
    <div id="child1" style="border:2px #f00 solid;padding:8px;margin:4px;">
        ここは id="child1" のdiv要素
    </div>
</div>
<div id="parent2" style="border:2px #999 solid;padding:8px;margin:4px;">
    ここは id="parent2" のdiv要素
</div>

<button onclick="isContain()">要素が指定した要素を含んでいるか調べます</button>
<div id="answer"></div>

<script>
function isContain(){
  let parent1 = document.getElementById("parent1");
  let child1  = document.getElementById("child1");
  let parent2 = document.getElementById("parent2");

  let answer="";

  if(parent1.contains(child1)){
    answer += "parent1はchild1を含んでいます<br>";
  }else{
    answer += "parent1はchild1を含みません<br>";
  }

  if(parent2.contains(child1)){
    answer += "parent2はchild1を含んでいます<br>";
  }else{
    answer += "parent2はchild1を含みません<br>";
  }

  if(parent1.contains(parent1)){
    answer += "parent1はparent1を含んでいます<br>";
  }else{
    answer += "parent1はparent1を含みません<br>";
  }

  document.getElementById("answer").innerHTML=answer;
}
</script>