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>