使用 JavaScript 检查 Div 元素是否为空

Check if a Div element is Empty using JavaScript

使用该childNodes属性检查 div 元素是否为空。该
childNodes属性返回一个NodeList元素的子节点，包括元素、文本节点和注释。如果属性返回值
0，则 div 为空。

以下是本文示例的 HTML。

索引.html


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

  <body>
    <div id="box"></div>

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

这是相关的 JavaScript 代码。

索引.js


const box = document.getElementById('box');

if (box.childNodes.length === 0) {
  console.log('✅ Element is empty');
} else {
  console.log('⛔️ Element is NOT empty');
}

childNodes
属性
返回一个NodeList包含元素的子节点，包括：

子元素
文本节点
评论节点

访问返回元素的子节点数的length属性。NodeList

如果你的元素有一个文本节点，或者里面有一个注释，它会被包含在NodeList属性childNodes返回中。

如果要忽略注释，请使用该textContent属性检查是否
div为空。

索引.html


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

  <body>
    <div id="box">
      <!-- this is a comment -->
    </div>

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

这是相关的 JavaScript 代码。

索引.js


const box = document.getElementById('box');

if (box.textContent.trim() === '') {
  console.log('✅ Element is empty');
} else {
  console.log('⛔️ Element is NOT empty');
}

我们使用
textContent
属性获取div元素及其后代的文本内容。

我们使用该方法删除了任何前导或尾随空格trim() ，并将结果与空字符串进行比较。

如果元素的textContent属性是一个空字符串，那么它就是空的。

–