Javascript 检查元素的内容是否为空，是否为透明容器，是否为空

我需要检查HTML元素（任何元素都可以）是否没有内容。我所说的内容不是指文本内容或任何其他HTML元素，因为这已经是给定的。我的意思是想检查它是否只是一个空白元素。例如：

---

如果我隐藏链接，唯一剩下的就是段落元素，它现在是空的。它上面没有任何样式，所以它只是一个带有边距/填充/任何内容的透明容器，但没有其他视觉样式。有没有办法在Javascript中检测到这一点？任何奇怪的浏览器怪癖都可以。丑陋的解决方案也有效。

您可以使用一种方法，删除所有HTML，然后修剪结果

如果结果为空字符串，则没有可见文本

---

这不会检测到具有高度和背景颜色的div，尽管您需要这种检测，但您还需要遍历while子树，查找具有任何可见css的元素，这需要非常详细的代码。

您可以使用一种方法，删除所有HTML，然后修剪结果

如果结果为空字符串，则没有可见文本

---

这不会检测到具有高度和背景颜色的div，虽然您需要这种检测，但您还需要遍历while子树，查找具有任何可见css的元素，这需要非常详细的代码。

要检测空的内容标记，您可以迭代每个节点的所有子节点并查找不存在的内容标记空文本节点。如果发现一个非空文本节点，则测试通过，否则该节点为空内容节点。我做了一个在Firefox中运行良好的测试：

<div id="container">
<div>Text <span>buzz</span>
</div>
<p><a href="#">Hello</a>
</p>
</div>

<script>
var all = document.getElementsByTagName('body')[0].getElementsByTagName('*');


allNodes: for (var i = 0, l = all.length; i < l; i++) {

  // for each childNode of every node...
  for (var ii = 0, sub = all[i].childNodes, ll = sub.length; ii < ll; ii++) {

    // is it a text node?
    if (sub[ii].nodeType == 3) {
      // Is the text node NOT empty?
      if (/[^\s]+/.test(sub[ii].nodeValue)) {
        continue allNodes;
      }

    }

  }

  console.log(all[i], ' fails');

}
</script>

文本嗡嗡声


var all=document.getElementsByTagName（'body'）[0].getElementsByTagName（'*'）；
allNodes:for（变量i=0，l=all.length；i

测试结果如下：

<div id="container"> fails
<p> fails

失败
失败

要检测空的内容标记，您可以迭代每个节点的所有子节点并查找非空的文本节点。如果发现一个非空文本节点，则测试通过，否则该节点为空内容节点。我做了一个在Firefox中运行良好的测试：

<div id="container">
<div>Text <span>buzz</span>
</div>
<p><a href="#">Hello</a>
</p>
</div>

<script>
var all = document.getElementsByTagName('body')[0].getElementsByTagName('*');


allNodes: for (var i = 0, l = all.length; i < l; i++) {

  // for each childNode of every node...
  for (var ii = 0, sub = all[i].childNodes, ll = sub.length; ii < ll; ii++) {

    // is it a text node?
    if (sub[ii].nodeType == 3) {
      // Is the text node NOT empty?
      if (/[^\s]+/.test(sub[ii].nodeValue)) {
        continue allNodes;
      }

    }

  }

  console.log(all[i], ' fails');

}
</script>

文本嗡嗡声


var all=document.getElementsByTagName（'body'）[0].getElementsByTagName（'*'）；
allNodes:for（变量i=0，l=all.length；i

测试结果如下：

<div id="container"> fails
<p> fails

失败
失败

您希望递归遍历元素的子节点，并检查它们是否都为空。递归行走逻辑并不困难。这实际上完全取决于如何定义空白元素：

显示：无
或可见性：隐藏
或所有关闭以下标准均为真：

• 文本
  • 没有
  • 或者只有空格
  • 或者文本颜色是透明的
  • 或文本颜色与父对象的背景颜色相同
• 背景
  • 透明的
  • 匹配父项
• 边框
  • 款式：无
  • 或宽度0px
  • 或颜色透明
  • 或颜色匹配父背景
• 标记
  • 非

• 儿童
  • 没有
  • 或全部满足上述标准

因此，您的递归函数如下所示：

if (!window.getComputedStyle)
{
    window.getComputedStyle = function(el)
    {
        return el.currentStyle || {};
    };
}
function isElementBlank(el)
{
    var style = window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle;
    if (style.display == "none" || style.visibility == "hidden")
    {
        return true;
    }
    if (el.tagName.toLowerCase() == "img")
    {
        return false;
    }
    var parentBG = "transparent";
    for (var parent = el.parentNode; parent; parent = parent.parentNode)
    {
        var parStyle = getComputedStyle(parent, null);
        if (parStyle.backgroundColor != "transparent")
        {
            parentBG = parStyle.backgroundColor;
            break;
        }
    }
    if (style.backgroundColor != "transparent" && style.backgroundColor != parentBG)
    {
        return false;
    }
    if (style.borderColor != "transparent" && 
        style.borderColor != parentBG && 
        parseInt(style.borderWidth) > 0 && 
        style.borderStyle != "none")
    {
        return false;
    }
    for (var i = 0; i < el.childNodes.length; i++)
    {
        var child = el.childNodes[i];
        if (child.nodeType == 3)
        {
            if (/\S/.test(child.nodeValue) && 
                style.color != parentBG && 
                style.color != "transparent")
            {
                return false;
            }
        }
        else if (!isElementBlank(child))
        {
            return false;
        }
    }
    return true;
}

if（！window.getComputedStyle）
{
window.getComputedStyle=函数（el）
{
返回el.currentStyle |{}；
};
}
函数isElementBlank（el）
{
var style=window.getComputedStyle？getComputedStyle（el，null）：el.currentStyle；
如果（style.display==“无”| style.visibility==“隐藏”）
{
返回true；
}
如果（el.tagName.toLowerCase（）=“img”）
{
返回false；
}
var parentBG=“透明”；
对于（var parent=el.parentNode；parent；parent=parent.parentNode）
{
var parStyle=getComputedStyle（父级，null）；
if（parStyle.backgroundColor！=“透明”）
{
parentBG=parStyle.backgroundColor；
打破
}
}
if（style.backgroundColor！=“透明”&&style.backgroundColor！=parentBG）
{
返回false；
}
如果（style.borderColor！=“透明”&&
style.borderColor！=parentBG&&
parseInt（style.borderWidth）>0&&
style.borderStyle！=“无”）
{
返回false；
}
对于（变量i=0；i

---

我没有对此进行测试，但这至少是一个开始。

您希望递归地遍历元素的子节点，并检查它们是否都为空。递归行走逻辑并不困难。这实际上完全取决于如何定义空白元素：

显示：无
或可见性：隐藏
或全部<