Question

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

我无法使用jQuery或其他类似的框架以及我认为的方式：

循环页面中的所有元素，检查它们的尺寸（坏的不好。不喜欢它）
使用XPath（有没有办法通过XPath按宽度和高度进行过滤？）

你们知道更好的方法吗？

Answer 1

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

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

Answer 2

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

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

我会使用广度优先或深度优先遍历来修剪分支，当它被发现是正确的大小，或者当大小变得太窄或太短时。这可以大大提高您的表现。

这是代码草图（未经测试）：

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]);
      }
    }
  }
}

按大小获取元素

2 个答案: