JavaScript contains() 方法 - JavaScript 教程

摘要: 本教程将教你如何使用 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)

当用户在 .container div 内部或外部点击时，msg 元素将存储消息。

其次，选择具有类 .container 的元素

const div = document.querySelector('.container');Code language: JavaScript (javascript)

第三，向 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。

本教程是否有帮助？