JavaScript：檢查「處女」元素？

是否有可能喲檢查一個元素是否僅包含JavaScript中的標記（無屬性，無內容）？JavaScript：檢查「處女」元素？

例子：

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

2014-03-01 Ood

如果你有一個名爲element變量的元素，你可以檢查的屬性和它的子節點的數目。如果這兩個都是零，那麼你的條件是真的。如果該元素包含空格作爲子節點

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

這不會是真的，雖然。例如：

<div> </div>

如果病情需要在這種情況下也是如此，那麼，不是檢查子節點，你可以得到元素作爲一個字符串的內容，刪除裏面所有的空格，而且檢查產生的長度爲零：

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

2014-03-01 15:52:42 rid

只是檢查屬性和內容，像

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

和

2014-03-01 15:54:23 adeneo

感謝您的演示！ – Ood

其他人已經給出了理想的技術，但如果你想找到符合這樣的要求，你可以使用類似的東西所有元素（ECMA5，即不是IE < = 8）：

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

，首先使用CSS僞選擇器:empty查找所有「空」元素，然後使用array.prototype.filter進一步過濾設置，使其僅顯示沒有屬性的元素。

2014-03-01 15:56:13 Utkanos

+1非常好。或許應該提到'：empty'在IE8及更低版本中不起作用。 –

我確實提過它是ECMA5（又名幾乎肯定不會在IE瀏覽器<9）工作，但是，不禁讓人明白。 – Utkanos

是的。僅僅是在Array.prototype.filter（）中填充Array.prototype.filter（）比在IE8中添加缺少的CSS3選擇器更簡單和更常見（並且IE6/7不能通過.prototype擴展DOM節點）。 –

一個有趣的特例：那些只包含空格的標籤呢？如果你想在你的「處女」，你應該使用element.children的定義中，這樣的標籤在this jsfiddle：

的代碼最重要的一條是：

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

2014-03-01 16:32:29 bjelli

回答