トップへ(mam-mam.net/)

Javascriptで要素が別の要素に含まれている(子孫要素)か調べる

検索:

Javascriptで要素が別の要素に含まれている(子孫要素)か調べる

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

ここは id="parent1" のdiv要素
ここは id="child1" のdiv要素
ここは id="parent2" のdiv要素

ソースコード

<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>