javascript - DOM/Vanilla Javascript 相当于 jquery 的 .is (':empty' )

Question

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

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

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

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

问题#1:如何将 .is(':empty') 转换为 vanilla js:

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

问题#2:这个逻辑也会遍历所有子项吗？

问题 #3:我们可以为 block 级元素创建这个 querySelector 吗？

Answer 1

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

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

例如，由于 null 是假值，而 filter 适用于 true/falsy 值:

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

(请注意，querySelectorAll 返回一个 NodeList 并且 NodeList 没有 filter 方法，所以我使用展开符号从 NodeList 创建一个数组 [因为根据现在的规范，NodeList 是可迭代的；但是请参阅 this answer 关于确保 NodeList 在您的环境中可迭代]。)

Question #2: Will this logic traverse all children too?

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

Question #3: Could we make this querySelector for only blocklevel elements?

您当然可以根据当前规范和默认的 display 浏览器通过执行标记列表来对其进行定制，例如 querySelectorAll("div, p, h1"/*...*/)。但这并不能告诉您该页面上的 block 元素是什么，因为 CSS 可以更改元素的显示。要获取最新信息，您需要使用 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 信息，您可以在必要时进行大量探索以确定自己的“空”。