按大小获取元素

Question

我必须获取大小为300x250的HTML页面中的所有元素（只是父级，所以如果DIV是300x250，并且图像在同一维度内，我将得到div）。

我不能使用jQuery或其他框架这样的，我认为在这些方式：（坏人坏事不喜欢它）

1. 循环都在一个页面检查它们的尺寸元素
2. 使用XPath（有没有办法通过的宽度和高度与XPath来过滤？）

你们是否知道一个更好的方式来做到这一点？

Answer 1

你有没有说过这width或height你有兴趣。当然，如果有img元素在文档中width或height属性然后XPath的可以选择它们（例如//img[@width = '300' and @height = '250']）。但像div元素之类的容器元素不具有这些属性，通常您可以访问它们的DOM属性。据我所知，XPath表达式中无法访问这些属性，因此XPath只能帮助您选择某些元素，然后您需要访问由XPath评估返回的任何DOM元素节点的属性offsetWidth/offsetHeight。所以这个答案主要是关于你的XPath请求。

根据目标浏览器的不同，您可以使用TreeWalkerhttps://developer.mozilla.org/en-US/docs/Web/API/treeWalker.filter或NodeIteratorhttps://developer.mozilla.org/en-US/docs/Web/API/NodeIterator。

Answer 2

您不需要遍历页面上的所有元素（例如querySelectorAll('*')）。事实上，考虑到您要求第一个祖先节点具有正确大小的要求，这样做会更困难。

但是，@MartinHonnen是正确的：无法通过XPath提取<div>或其他灵活大小的元素的offsetHeight。你必须浏览元素并测试它们。

我会使用广度优先或深度优先遍历来修剪分支，当它被发现是正确的大小，或者当大小变得太窄或太短时。这应该会显着改善您的性能。

下面的代码草图（未测试）：

function findElementsBySize(w,h){ 
    var found = []; 
    recursiveFind(document.body); 
    return found; 

    function recursiveFind(el){ 
    if (el.offsetWidth==w && el.offsetHeight==h){ 
     found.push(el); 
    } else if (el.offsetWidth>=w && el.offsetHeight>=h){ 
     for (var i=el.childNodes.length;i--;){ 
     recursiveFind(el.childNodes[i]); 
     } 
    } 
    } 
}