使用 JavaScript 检查 Span 元素是否为空
使用 childNodes 属性检查 span 元素是否为空。 childNodes 属性返回元素的子节点的 NodeList，包括元素、文本节点和注释。 如果属性返回值 0，则 span 为空。
以下是本文示例的 HTML。
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <span id="container"></span> <script src="index.js"></script> </body> </html>
这是相关的 JavaScript 代码。
index.jsconst span = document.getElementById('container'); if (span.childNodes.length === 0) { console.log('✅ Span element is empty'); } else { console.log('⛔️ Span element is not empty'); }
childNodes 属性返回一个包含元素子节点的 NodeList，包括：
- 子元素
- 文本节点
- 注释节点
访问
NodeList的 length 属性会返回该元素的子节点数。
如果 length 属性返回大于 0 的值，则 span 元素不为空。
如果我们的元素中有一个文本节点或事件注释，它将包含在
childNodes属性返回的 NodeList 中。
如果要忽略注释，请使用 textContent 属性检查 span 元素是否为空。
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <span id="container"> <!-- my comment here --> </span> <script src="index.js"></script> </body> </html>
这是相关的 JavaScript 代码。
index.jsconst span = document.getElementById('container'); if (span.textContent.trim() === '') { console.log('✅ Span element is empty'); } else { console.log('⛔️ Span element is not empty'); }
我们使用 textContent 属性获取 span 元素及其后代的文本内容。
我们使用
trim()方法删除了任何前导或尾随空格，并将结果与空字符串进行比较。
如果元素的 textContent 属性为空字符串，则它为空。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
