Question

我正在做一个有关网页分类的项目，对此我感兴趣的是提取可见文本，图像和svg（包括视口之外的元素）的数据。我在准确确定这一点时遇到了麻烦。

我已经检查了互联网的各个角落是否存在潜在原因，但不幸的是没有成功。

我当前的代码如下：

var isHidden = el => {
    return Object.values(potentialHiddenCauses(el)).filter(x => x).length > 0;
}
var potentialHiddenCauses = el => {
    var style = window.getComputedStyle(el);
    var rect = el.getBoundingClientRect();
    var hasNodeWithVisibleText = Array.from(el.childNodes).filter(x => x.nodeType == 3 && x.nodeValue.replace(/\s/g, "").length > 0).length > 0;
    var data = {
        // a : !el.offsetParent, // can be a false positive?
        b : style.display == "none",
        c : style.opacity == 0,
        d : style.visibility == "hidden",
        e: el.offsetWidth == 0,
        f: el.offsetHeight == 0,
        i : rect.width == 0,
        j : rect.height == 0,
        k : rect.x < 0,
        l: rect.x > document.documentElement.scrollWidth,
        m : rect.y < 0,
        n: rect.y > document.documentElement.scrollHeight,
        o : hasNodeWithVisibleText && style.fontSize == "0px",
        p : el.tagName.toLowerCase() == "img" && !el.src
    }
    return data;
}

我以前也检查过element.style属性，但是据我了解，它们可能不正确，而getComputedStyle应该是正确的。

每次我都认为检查很稳定时，就会出现一个极端情况，导致我不得不重新启动整个数据收集过程。

我最近的问题是在https://www.jbhifi.com.au/bose/bose-quietcomfort-35-ii-wireless-over-ear-headphones-black/505852/上，下拉菜单中的文本和图像在不显示时被视为可见。

如果有人能告诉我有关我的方法中缺少检查或缺陷的信息，那就太好了。

确定DOM节点是否可见

0 个答案: