Javascript 如何检查元素是否与纯JS中的：empty伪类匹配？

如何在纯JavaScript（没有jQuery，没有库）中检查给定的HTML元素是否为空？我对“空”的定义与“空”的定义相同。因此，如果给定元素与

：empty

选择器匹配，那么我想知道它

function isEmpty (el) {
    if (!el.hasChildNodes()) return true;

    for (var node = el.firstChild; node = node.nextSibling;) {
        var type = node.nodeType;
        if (type === 1 && !isEmpty(node) || // another element
            type === 3 && node.nodeValue) { // text node
            return false;
        }
    }
    return true;
}

---

根据CSS规范，如果给定元素没有非空的子节点，则返回

true

我认为最简单、最简单的方法是：

    elem = document.getElemntById('id_of_the_elem');
    function isEmpty(elem){
        if(elem.innerHTML=='') console.log("empty tag");
        else console.log('Non empty tag');
    } 

据我所知，它与规范完全匹配，因此可以用作参考。自撰写本文之日起：

"empty": function( elem ) {
    // http://www.w3.org/TR/selectors/#empty-pseudo
    // :empty is only affected by element nodes and content nodes(including text(3), cdata(4)),
    //   not comment, processing instructions, or others
    // Thanks to Diego Perini for the nodeName shortcut
    //   Greater than "@" means alpha characters (specifically not starting with "#" or "?")
    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeName > "@" || elem.nodeType === 3 || elem.nodeType === 4 ) {
            return false;
        }
    }
    return true;
}

确保法规遵从性的一种方法是使用

.querySelectorAll

或

根据需要，甚至可以在分离的节点上工作：

function matches(el, selector) {
  return !!(el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector).call(el, selector);
}

使用以下任一选项：

matches(el, ':empty')

---

尽管如此，我还是要问，为什么“没有非空的子节点”？规范中没有提到这一点。@BoltClock引用：：empty伪类表示一个根本没有子元素的元素。。。仅元素节点和内容节点。。。必须将其数据长度非零视为影响emptiness@rvighne仅元素节点和内容节点。。。谁的数据长度非零？？？。请准备一把小提琴来演示你的code@BoltClock现在进行编辑以正确处理注释。“PIs”是什么意思？@rvighne：据我所知，“其数据长度非零”部分仅指内容节点，而不是元素节点。如果一个元素有一个子元素节点，即使该子元素节点本身是空的，也不能说它根本没有子元素。如果它有空的子节点呢？OP也定义为：。其数据具有非零长度。这不是OP的定义，这是规范所说的。这取决于你如何解释它。在他们的答案下面看到我的评论。Sizzle的技术类似但更简单：两者看起来都很可靠。该方法返回一个布尔值，指示“…此节点是否有子节点”，所以不需要qSA或变体。@RobG:但是

hasChildNodes

本身并不足以涵盖

：empty

的定义-请参见OP的自我回答。使用SelectorsAPI测试元素基本上是检查元素是否与选择器匹配的一种方法，因为如果浏览器已经正确实现了选择器，那么您不必尝试重新实现选择器。唯一的问题当然是如上所述，浏览器支持-

matches（）

直到出现在规范中。这不是受

：empty

或CSS引擎中错误的浏览器实现的影响吗？但我希望你能证明我错了，这看起来更可靠。我想要一致的东西。@rvighne是的，它假设一个合适的CSS引擎。它与CSS的计算方式相匹配。什么东西里面有一个空元素？在那种情况下，它将无法正常工作。

matches(el, ':empty')