JavaScript：检查“处女”元素？

Question

是否有可能检查一个元素是否只包含JavaScript中的标记（没有属性，没有内容）？

示例：

<div></div> -> true
<div id="foo"></div> -> false
<div>bar</div> -> false

Answer 1

如果在名为element的变量中包含元素，则可以检查它具有的属性和子节点的数量。如果这两个都为零，则表明您的条件为真。

element.attributes.length === 0 && element.childNodes.length === 0

---

如果元素包含空格作为子节点，则不会这样。例如：

<div>   </div>

如果条件在这种情况下也需要为真，那么，不是检查子节点，而是可以将元素的内容作为字符串，删除内部的所有空格，并检查结果长度是否为零：

element.innerHTML.replace(/\s+/, '').length === 0

Answer 2

只需检查属性和内容，例如

function isVirgin(element) {
    return element.attributes.length === 0 &&  
           element.innerHTML.trim().length === 0;
}

FIDDLE

Answer 3

其他人已经提供了理想的技术，但是如果你想找到符合这些要求的所有元素，你可以使用类似的东西（ECMA5，即不是IE＆lt; = 8）：

var virginEls = [].filter.call(document.querySelectorAll('*:empty'), function(el) {
    return !el.attributes.length;
});

首先使用CSS伪选择器:empty找到所有'空'元素，然后使用array.prototype.filter进一步将该集合过滤为没有属性的那些元素。

Answer 4

一个有趣的特例：那些只包含空格的标签呢？ 如果要在“virgin”的定义中包含此类标记，则应使用element.children，如this jsfiddle中所示：

最重要的代码是：

log("has " + o.attributes.length + " attributes and " + o.children.length + " children");