什么是jQuery的.is（'：empty'）的DOM / Vanilla Javascript等效项

Question

我想编写一段代码，将遍历页面的document.body并报告所有空块级DOM节点。 这是SEO / a11y的通行证。

我发现这篇文章似乎会有所帮助：

https://css-tricks.com/snippets/jquery/check-for-empty-elements/

$('*').each(function() {
         if ($(this).is(':empty') == "") {
                   //Do Something
         }
});

问题1：如何将.is(':empty')转换为普通js：

function isEmpty(el) {
  // Robust isEmpty logic here
}
document.querySelectorAll('*').filter(el => {
  return isEmpty(el);
});

问题2：这个逻辑是否也会遍历所有孩子？

问题3：能否仅对块级元素使用此querySelector？

Answer 1

DOM版本中的“空”是没有子节点，您可以通过多种方式进行检查，最常见的两种可能是：

• 如果没有子节点，则firstChild将为null
• 如果没有子节点，则childNodes的length将为0

举例来说，由于null为falsy且filter与true / falsy值一起使用：

const allEmpty = [...document.querySelectorAll('*')].filter(el => !el.firstChild);

（请注意， querySelectorAll返回一个NodeList而NodeList没有filter方法，因此我在那里使用了扩展符号从NodeList创建一个数组[因为NodeList现在可以根据规范进行迭代 ；但是请参见有关确保NodeList 此答案。在您的环境中是可迭代的 ]。

问题2：这个逻辑是否也会遍历所有孩子？

querySelectorAll('*')选择文档中的每个元素，其中许多元素也会在列表中的其他元素之内。

问题3：能否仅对块级元素使用此querySelector？

您当然可以根据当前规范来定制它，并且默认的display浏览器可以通过做一个标记列表来应用于它们，例如querySelectorAll("div, p, h1"/*...*/) 。 但这并不能告诉您该页面上的block元素是什么，因为CSS可以更改元素的display 。 要获取最新信息，在选择每个元素并检查结果display后，您需要在每个元素上使用getComputedStyle 。

在页面上构建所有元素的列表可能并不理想，您可以考虑使用递归函数：

function findEmpty(element, results = []) {
    let child = element.firstChild;
    if (!child) {
        results.push(element);
    }
    while (child) {
        if (child.nodeType === Node.ELEMENT_NODE) {
            findEmpty(child, results);
        }
        child = child.nextSibling;
    }
    return results;
}
const allEmpty = findEmpty(document.body);

---

但这部分归结为您认为“空”的部分。 jQuery的:empty选择器非常文字：一个元素只有在没有任何子节点时才为空。 但是您的定义可能更松散-例如，也许您出于您的目的考虑只包含空格（直接或在后代元素中）为“空”的元素（在这种情况下： !el.textContent.trim() ）。 上面的第一个链接是有关MDN的DOM信息，如果需要的话，它使您可以进行很多探索以确定自己的“空”。

Answer 2

您可以使用children是从不同childNodes它可以包含包括文本节点的任何节点。 如果使用childNodes.length上div状<div>Some Text here</div>将返回一个非空数组，即使没有子元素或HTML标签

 function isEmpty(el) { return el.children.length } [...document.querySelectorAll('div.parent')].filter(function(el) { let k = isEmpty(el); console.log(k) }); 

 <div class='parent'> <div>Child 1</div> <div>Child 1</div> <div>Child 1</div> <div>Child 1</div> </div> <div class='parent'></div>