containsメソッド

メソッド contains は、 ある要素が別の要素を内部に含んでいるかどうかを チェックすることを可能にします。 メソッドのパラメータとして、メソッドが適用された要素の 内部にあるかどうかをチェックされる要素が 渡されます。

構文

javascript親要素.contains(要素);

例

段落 #child が ブロック #parent の中にあるかどうかを チェックしてみましょう:

html<div id="parent">
  <p id="child"></p>
</div>

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#child');

let contains = parent.contains(child);
console.log(contains);

コード実行結果:

javascripttrue

例

今度は、親要素の中に渡された要素が 存在しないため、メソッドは false を 返します:

html<div id="parent"></div>
<p id="child"></p>

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#child');

let contains = parent.contains(child);
console.log(contains);

コード実行結果:

javascriptfalse

例

メソッドが呼び出されたのと同じ要素を 渡すこともでき、この場合もメソッドは true を返します:

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');
let contains = parent.contains(parent);

console.log(contains);

コード実行結果:

javascripttrue

関連項目