概要: このチュートリアルでは、JavaScript の contains() メソッドを使用して、あるノードが指定されたノードの子孫であるかどうかを確認する方法を学習します。
JavaScript contains() メソッドの紹介
contains() は、Node インターフェースのメソッドであり、あるノードが別のノードの子孫であるかどうかを判断できます。
contains() メソッドの構文は次のとおりです。
node.contains(childNode)Code language: JavaScript (javascript)この構文では、
nodeはテスト対象のノードです。childNodeはテストに使用するノードです。
このメソッドは、childNode が node に含まれている場合は true を、そうでない場合は false を返します。
node と childNode が同じ場合、contains() 関数は true を返します。なぜなら、node は自身の中に含まれているからです。
childNode が null の場合、contains() メソッドは false を返します。
JavaScript contains() メソッドの例
クラス .container を持つ div が含まれているページがあるとします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" value="noindex">
<title>JavaScript contains()</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
</head>
<body>
<div class="container">
</div>
<div class="message">
</div>
</body>
</html>Code language: HTML, XML (xml)contains() メソッドを使用して、ユーザーが div の内側をクリックしたか外側をクリックしたかを次のように判断できます。
const msg = document.querySelector('.message');
const div = document.querySelector('.container');
document.addEventListener('click', (e) => {
if (div.contains(e.target)) {
msg.innerHTML = '<p>Clicked inside the div</p>';
} else {
msg.innerHTML = '<p>Clicked outside the div</p>';
}
});Code language: JavaScript (javascript)出力
仕組み
まず、.message クラスを持つ要素を選択します。
const msg = document.querySelector('.message');Code language: JavaScript (javascript)msg 要素は、ユーザーが .container div の内側または外側をクリックしたときにメッセージを格納します。
次に、.container クラスを持つ要素を選択します。
const div = document.querySelector('.container');Code language: JavaScript (javascript)3 番目に、クリックイベントハンドラーを追加します document 要素に
document.addEventListener('click', (e) => {
// ...
}Code language: JavaScript (javascript)最後に、ユーザーが div 要素の内側または外側をクリックした場合は、対応するメッセージを表示します。
if (div.contains(e.target)) {
msg.innerHTML = '<p>Clicked inside the div</p>';
} else {
msg.innerHTML = '<p>Clicked outside the div</p>';
}Code language: JavaScript (javascript)ユーザーが div をクリックすると、e.target は div になるので、div.contains(e.target) は true を返します。そうでない場合は、false を返します。
まとめ
contains()メソッドは、ノードが指定されたノードの子孫である場合はtrueを、そうでない場合はfalseを返します。
