使用 JS 检查 Element 是否具有具有特定 ID 的 Child

作者

使用 JS 检查 Element 是否具有具有特定 ID 的 Child

Check if Element has Child with specific ID using JS

使用该querySelector()方法检查元素是否具有具有特定 id 的子元素，例如if (box.querySelector('#child-3') !== null) {}. 该
querySelector方法返回与提供的选择器匹配或null没有元素匹配的第一个元素。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">
      <p>Child 1</p>
      <p>Child 2</p>
      <p id="child-3">Child 3</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

if (box.querySelector('#child-3') !== null) {
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}

我们使用该getElementById方法来选择父元素。

querySelector
方法可以限定为特定元素，并返回第一个元素，该元素是调用该方法的元素的后代，并且与提供的选择器匹配。

如果没有元素与提供的选择器匹配，则该querySelector 方法返回null。

在我们的if语句中，我们检查返回值是否不等于null。如果找到元素，则if块运行，否则else块运行。

如果您还没有选择父元素，您可以一步完成。

索引.js
if (document.querySelector('#box #child-3') !== null) {
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}
我们使用该querySelector方法来选择具有 of 的元素，该元素是具有of的元素的后代。 idchild-3idbox

您传递给querySelector方法的选择器可以根据需要指定。以下示例仅检查元素的任何直接子元素是否具有 id。

索引.js
if (document.querySelector('#box > #child-3') !== null) {
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}

上面的选择器不会匹配具有 of 的元素的任何嵌套id子元素。boxidchild-3

–