使用 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 属性为空字符串，则它为空。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
