javascript - 查找所有 block 元素

Question

我需要找到给定节点中的所有 block 元素。 block 元素不仅仅是具有 display:block 的元素在 CSS 中，还有默认的 block 元素，如 div和 p .

我知道我可以获得元素的计算样式并检查 display属性，但是，我的代码将在一个长循环中执行，并且每次获取计算样式都会刷新回流堆栈，因此它会非常膨胀。

我正在寻找一些技巧来在没有 getComputedStyle 的情况下做到这一点.

编辑

这是我想改进的当前代码:

var isBlockOrLineBreak = function(node)
{
    if (!node) {
        return false;
    }
    var nodeType = node.nodeType;
    return nodeType == 1 && (!inlineDisplayRegex.test(getComputedStyleProperty(node, "display")) || node.tagName === "BR")
        || nodeType == 9 || nodeType == 11;
};

另一个编辑

jQuery 的 .css 在底层调用 getComputedStyle。所以这不是我要找的。

我的解决方案

感谢大家的建议。不幸的是，它们都不符合我的要求。在深入研究文档后，我意识到没有 getComputedStyle 就没有真正的方法可以做到这一点。但是，我想出了应该尽可能避免 getComputedStyle 的代码。这是代码:

$.extend($.expr[':'], {
    block: function(a) {
        var tagNames = {
            "ADDRESS": true,"BLOCKQUOTE": true,"CENTER": true,"DIR": true,"DIV": true,
            "DL": true,"FIELDSET": true,"FORM": true,"H1": true,"H2": true,"H3": true,
            "H4": true,"H5": true,"H6": true,"HR": true,"ISINDEX": true,"MENU": true,
            "NOFRAMES": true,"NOSCRIPT": true,"OL": true,"P": true,"PRE": true,"TABLE": true,
            "UL": true,"DD": true,"DT": true,"FRAMESET": true,"LI": true,"TBODY": true,
            "TD": true,"TFOOT": true,"TH": true,"THEAD": true,"TR": true
        };
        return $(a).is(function() {
            if (tagNames[this.tagName.toUpperCase()]) {
                if (this.style.display === "block")
                {
                    return true;
                }
                if (this.style.display !== "" || this.style.float !== "")
                {
                    return false;
                }
                else {
                    return $(this).css("display") === "block";
                }
            }
            else {
                if (this.style.display === "block") {
                    return
                }
                else {
                    return $(this).css("display") === "block";
                }
            }
        });
    }
});

此代码的用法非常简单，只需执行 $(":block") 或 $("form :block")。这将避免在很多情况下使用 .css 属性，并且只有在万不得已时才使用它。

Starx 的回答让我有了这样做的想法，所以我打算将他的消息标记为答案。

Answer 1

为了解决这个问题，我们考虑了通用 CSS 选择器和 jQuery .filter() 函数:

$("*").filter(function(index) {
    return $(this).css("display") == 'block';
});

此代码查看它可以找到的所有元素，如果它们通过过滤器，它会返回一个元素列表。如果过滤器函数为该元素返回 true，则该元素通过过滤器。在这种情况下，过滤器会测试每个找到的元素的 display 属性，并根据所需的值对其进行测试。

现在，您还提到要查找 p 和 div 元素。幸运的是，我们也有办法在过滤器函数中找到它们。使用 jQuery 的 prop 函数，我们可以返回一个元素的属性。在这种情况下，我们对被过滤的 DOM 元素的 tagName 属性感兴趣。将此功能与上述过滤器相结合，我们得到:

$("*").filter(function(index) {
    var $this = $(this);
    var tagName = $this.prop("tagName").toLowerCase();
    return $this.css("display") == 'block' || tagName == 'p' || tagName == 'div';
});

请注意我们如何将 tagName 变量设置为小写，因为我们不能期望 tagName 属性的特定大小写(如果我错了请纠正我)。