javascript - 按大小获取元素

Question

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

我不能使用 jQuery 或其他类似的框架，我认为的方法是：

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

你们知道更好的方法吗？

Answer 1

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

根据目标浏览器，您可能可以使用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]);
      }
    }
  }
}