检查 div 是否有另一个 div - Javascript

在Web前端开发中，我们经常需要检查某个HTML元素是否包含另一个HTML元素。这在很多场景下都是很有用的，比如说我们需要判断一个DIV是否包含了一个特定的按钮，或者需要根据某个DIV是否显示来决定一些行为等等。在本文中，我们将介绍如何使用Javascript来检查一个DIV是否包含另一个DIV。

方法一：使用 querySelector 方法

我们可以使用Javascript提供的querySelector方法来查询是否存在某个特定的HTML元素。该方法接收一个CSS选择器作为参数，如果选中的元素存在，则返回该元素；否则返回 null。

下面的代码演示了如何使用querySelector方法来检查一个DIV是否包含另一个DIV：

const parentDiv = document.querySelector('#parent-div');
const childDiv = parentDiv.querySelector('#child-div');

if(childDiv) {
  console.log('Parent DIV contains Child DIV');
} else {
  console.log('Parent DIV does not contain Child DIV');
}

上面的代码中，我们首先使用querySelector方法选中了一个特定的父级DIV元素。然后，我们再在这个父级元素中使用querySelector方法查找一个特定的子级DIV元素。最后，我们根据是否找到该子级DIV元素，来判断父级DIV是否包含该子级DIV元素。

方法二：使用 contains 方法

除了上面的querySelector方法，我们还可以使用DOM提供的 contains 方法来判断一个元素是否包含另一个元素。该方法接收一个DOM节点作为参数，在该节点内查找指定元素。如果查找到指定元素，则返回 true；否则返回 false。

下面的代码演示了如何使用contains方法来检查一个DIV是否包含另一个DIV：

const parentDiv = document.querySelector('#parent-div');
const childDiv = document.querySelector('#child-div');

if(parentDiv.contains(childDiv)) {
  console.log('Parent DIV contains Child DIV');
} else {
  console.log('Parent DIV does not contain Child DIV');
}

上面的代码中，我们首先使用querySelector方法选中了一个特定的父级DIV元素和一个特定的子级DIV元素。然后，我们在父级DIV元素中使用contains方法来查找该子级DIV元素。最后，我们根据contains方法的返回值，来判断父级DIV是否包含该子级DIV元素。

总结

在本文中，我们介绍了两种方法来检查一个DIV是否包含另一个DIV。第一种方法是使用Javascript提供的querySelector方法来选中指定的HTML元素；第二种方法是使用DOM提供的contains方法来查找指定的DOM节点。这两种方法都很常用，可以根据具体的需求选择合适的方法来使用。